michaelmcgurk michaelmcgurk - 3 months ago 14
CSS Question

Table - Live Search with jQuery

I have been working on a solution for a Live Search on my table of data.

When I search

Jim
it works as expected :-)

However, when I search
Carey
, no results appear. Why is this? :-(

Demo: http://jsfiddle.net/L1d7naem/



$("#search").on("keyup", function() {
var value = $(this).val();

$("table tr").each(function(index) {
if (index !== 0) {

$row = $(this);

var id = $row.find("td:first").text();

if (id.indexOf(value) !== 0) {
$row.hide();
}
else {
$row.show();
}
}
});
});

table, tr, td, th{
border: 1px solid blue;
padding: 2px;
}

table th{
background-color: #999999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><th>Forename</th><th>Surname</th><th>Extension</th></tr>
<tr><td>Jim</td><td>Carey</td><td>1945</td></tr>
<tr><td>Michael</td><td>Johnson</td><td>1946</td></tr>
</table>
<br />
<input type="text" id="search" placeholder=" live search"></input>




Answer

The behaviour you want can be achieved with the following corrections in the each loop (also note the < 0 in the condition...):

var id = $.map($row.find('td'), function(element) {
    return $(element).text()
}).join(' ');

if (id.indexOf(value) < 0) {
    $row.hide();
} else {
    $row.show();
}
Comments