Remove <tr> if the <td> does not contain the value of the <input>

Question

I'm trying to implement a live search (filtering) feature with jQuery for a table. The table contains a list of people and their grad year and high school. When the user starts typing inside the search input, the table will start filtering out all the rows that do not contain the value of the search input. It will also add the class of highlight to the td that the searched text was in.

How can I filter each row and highlight the td element when the user searches something? I tried implementing this with the code below but to no avail. What can I tweak in this code to get this working correctly?

Below is my code. Here is my jsFiddle: http://jsfiddle.net/mikerodriguez/jybrnt22/2/

jQuery

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

    $("#search_table tbody tr").each(function(){

        var row = $(this);
        var td_element = $("#search_table tbody tr td");

        if(input !== td_element.text()){
            row.hide();
        }else{
            row.show();
            td_element().addClass("highlight");     
        }

    })

});

CSS

body {
    margin: 0;
    padding: 0;
    font-family: Arial;
    font-size: 14px;
}
.search_field {
    padding: 15px;
}
.search_field input[type="text"] {
    padding: 15px;
    width: 98%;
    font-size: 18px;
}
.search_table_container {
    padding: 15px;
}
.search_table {
    width: 100%;
}
.search_table th {
    background-color: #AAA;
    font-weight: bold;
    padding: 10px 0px;
}
.search_table td {
    text-align: center;
    background-color: #CCC;
    padding: 15px 0px;
}

HTML

<div class="search_field">
    <input type="text" id="search" placeholder="Search for Person, Class, or High School">
</div>
<div class="search_table_container">
    <table id="search_table" class="search_table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Class</th>
                <th>High School</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Smith</td>
                <td>2014</td>
                <td>Some High School</td>
            </tr>
            <tr>
                <td>Homer Simpson</td>
                <td>2015</td>
                <td>Springfield High School</td>
            </tr>
            <tr>
                <td>Bugs Bunny</td>
                <td>2050</td>
                <td>Looney Tunes High School</td>
            </tr>
            <tr>
                <td>George Washington</td>
                <td>1749</td>
                <td>Georgetown Academy</td>
            </tr>
            <tr>
                <td>Marty McFly</td>
                <td>1991</td>
                <td>Back to the Future</td>
            </tr>
            <tr>
                <td>Doc Emmet Brown</td>
                <td>1965</td>
                <td>One Point Twenty-one Gigawatts</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

One problem is:

input !== td_element.text()

You're comparing partial input values to the entire contents of your columns. Instead it should be something like

td_element.text().indexOf(input) == -1

But there were actually quite a few issues (including simple syntax errors, eg, td_element is not a function). I tweaked your example to something that works: http://jsfiddle.net/gh5kjku5/2/

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

$("#search_table tbody tr").each(function(){

    var row = $(this);
    var td_elements = row.find('td');
    var colText = td_elements.text();

    if(colText.indexOf(input) == -1){
        row.hide();
    }else{
        row.show();
        td_elements.addClass("highlight");   
    }
})});

You'll need to do a bit more work to do things like reset the td background colors when the search box is cleared. Good luck!

Answer 2

hi try this it's working.

$("#search").on("keyup", function () {
    var input = $(this).val();
    if (input == '') {
        $("#search_table tbody tr").show();
    } else {
        $("#search_table tbody tr").show();
        $("#search_table tbody tr").each(function () {
            var row = $(this);
            var td_element = $("#search_table tbody tr td");
            if ($(row).text().trim().toUpperCase().indexOf(input.toUpperCase()) > -1) {
                row.hide();
            } else {
                row.show();
            }
        });
    }
});

see jsfiddle link http://jsfiddle.net/jybrnt22/14/