Search / Filter an HTML Table with jQuery

Step 1: Handle the search funtionality with jQuery:

$(document).ready(function(){
    $("#searchForm").on("keyup", function () {
        var value = $(this).val().toLowerCase();
        $("#searchTable tr").filter(function () {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });
});

Step 2: Create the search input for user (typically outside of your table):

<input id="searchForm" type="text" placeholder="Enter Search Criteria" class="form-control">

Step 3: In your table <tbody> element, add the following:

<tbody id="searchTable">

Example for filtering records in an html table:

<input id="searchForm" type="text" placeholder="Enter Search Criteria">
<table>
​     <thead>
          <th ......</th>...
     </thead>
    <tbody id="searchTable">
          <tr>
               <td>...</td>...
          </tr>
     </tbody>
</table>