I wish to search from an input (type="text") in a grid (like table but made in .css for be responsive so with div ans span in html) if input (type="text"). (I precise than this grid in imported from sql sever by php). I don't knw what wrong in my code but it's hide evreything.
I tried http://jsfiddle.net/FranWahl/rFGWZ/ by modifing of course what I needed (so #search by #searchName; table tr by .grid ->class of my div(s); td by span and .text() by .val()-> actually I tried both )
//so here my .js
$(function() {
$("#searchCode").on("keyup", function() {
var value = $(this).val();
$(".grid").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("span:nth-child(1)").val();
if (id.indexOf(value) !== 0) {
$row.hide();
}
else {
$row.show();
}
}
});
});
});
//here my php
<form action="menu.php?Option=SelectIgr" method="post">
<div id="titleRow" class="grid">
<span class="cellCode titleCell"><button name="order" class="titlebutton" type="submit" value="orderByCode">Code</button></span>
<span class="cellName titleCell"><button name="order" class="titlebutton" type="submit" value="orderByName">Name</button></span>
<span class="cellEdit titleCell">Edit</span>
<span class="cellDelete titleCell">Delete</span>
</div>
</form>
<?php foreach($ingredients as $object)
{ ?>
<form method="post" id=<?=$object->code()?>>
<div class="grid">
<span class="cellCode"><input type="text" name="code" value=<?=$object->code()?>></span>
<span class="cellName"><input type="text" name="name" value=<?=$object->name()?>></span>
<span class="cellEdit"><button class="ButtonEdit" type="submit" formaction="/action_edit.php"></button></span>
<span class="cellDelete"><button class="ButtonDelete" type="submit" formaction="/action_delete.php"></button></span>
</div>
</form>
<?php } ?>
I expected that in live it would hide line that I don't whant like here http://jsfiddle.net/FranWahl/rFGWZ/ but it's hide everything (like if it didn't show the value on id
