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: /

$("#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=".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>

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/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./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>

• javascript
• jquery
• html
• css

• 3 there's a plugin to do this, it also handles pagination and sorting too: datatables, but to answer your question, you are only paring against the first td: $row.find("td:first").text() – Pete Commented Aug 30, 2016 at 10:04
• @Pete Many thanks for this. I'm looking into that plugin. How do I resolve my current code to search the other td's? :) – michaelmcgurk Commented Aug 30, 2016 at 10:09
• I would do it like this: jsfiddle/L1d7naem/14 – Pete Commented Aug 30, 2016 at 10:25

6 Answers 6

Its because of the following line:

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

You are working on the first column of table only and "Carey" is in second column of table

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();
}

Try this. You have to iterate through all columns and once you find any match just escape the loop using the return false; within each() function. Also, indexOf returns -1 if string is not found.

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

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

            $row = $(this);

            $row.find("td").each(function(){
              var id = $(this).text();
              if (id.indexOf(value) < 0) {
                $row.hide();
              }
              else {
                $row.show();
                return false;
              }
            });
        }
    });
});

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

table th{
    background-color: #999999;
}

<script src="https://ajax.googleapis./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>

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

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

            $row = $(this);

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





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

http://jsfiddle/Lyxex4tp/

Try this:

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

$("table td").each(function() {
    if(value.match($(this).text)) {
        console.log($(this).text());
    }

    else {
        $("table").hide();
    }
});
});

Try matching with all the td elements.

Hope this works,

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

$("table tr").each(function(index) {
    if (index !== 0) {
        var id = $(this).children().text()
        if (id.indexOf(value) < 0) {
           $(this).hide();
        }else {
            $(this).show();
        }
    }
 });
});

Here is the working fiddle https://jsfiddle/44Lux7ze/