How to Live search on the HTML table with jQuery

Whenever there is the large list of records which you are displaying in the HTML table. In this case, it’s better to allow the users to search text within the table.

You can easily do this on your Client-side with jQuery.

For searching text within HTML table columns I am using .contains() method.

How to Live search on the HTML table with jQuery


Contents

  1. HTML
  2. jQuery
  3. Demo
  4. Conclusion

1. HTML

I have created two textboxes for searching value and a <table> with some records.

In the <table> added a <tr class=’notfound’> at the last which display when no record found while search.

Completed Code

<style>
.notfound{
  display: none;
}
</style>
<input type='text' id='txt_searchall' placeholder='Enter search text'>&nbsp; 
<input type='text' id='txt_name' placeholder='Enter search name'>
<br/>
<table width='100%' border='1' style='border-collapse:collapse;' >
 <thead>
  <tr>
   <th>S.no</th>
   <th>Name</th>
   <th>Course</th>
   <th>City</th>
  </tr>
 </thead>
 <tbody>
   <tr>
     <td>1</td>
     <td>Yogesh singh</td>
     <td>M.SC</td>
     <td>Bhopal</td>
   </tr>
   <tr>
     <td>2</td>
     <td>Sonarika Bhadoria</td>
     <td>BE</td>
     <td>Pune</td>
   </tr>
   <tr>
     <td>3</td>
     <td>Vishal Sahu</td>
     <td>BE</td>
     <td>Indore</td>
   </tr>
   <tr>
     <td>4</td>
     <td>Sunil Patel</td>
     <td>MBA</td>
     <td>Bhopal</td>
   </tr>
   <tr>
     <td>5</td>
     <td>Anil Singh</td>
     <td>MCA</td>
     <td>Delhi</td>
   </tr>
   <!-- Display this <tr> when no record found while search -->
   <tr class='notfound'>
     <td colspan='4'>No record found</td>
   </tr>
 </tbody>
</table>

2. jQuery

Define keyup event on both textboxes.

Search all columns

The first textbox use to search value on all columns.

When keyup event triggers then hide all <tbody><tr> and search value on all  <td> of <tbody><tr>. If value found then show the <tr>.

Display <tr class='notfound' > if not record found.

Particular Column

The second textbox use to search value on name column.

Use nth-child selector to select Name column by passing index position (2) in it.

The :contains() search is case sensitive for making it case-insensitive I have added script after document ready. You can remove it if you don’t want.

Completed Code

$(document).ready(function(){

  // Search all columns
  $('#txt_searchall').keyup(function(){
    // Search Text
    var search = $(this).val();

    // Hide all table tbody rows
    $('table tbody tr').hide();

    // Count total search result
    var len = $('table tbody tr:not(.notfound) td:nth-child(2):contains("'+search+'")').length;

    if(len > 0){
      // Searching text in columns and show match row
      $('table tbody tr:not(.notfound) td:contains("'+search+'")').each(function(){
        $(this).closest('tr').show();
      });
    }else{
      $('.notfound').show();
    }

  });

  // Search on name column only
  $('#txt_name').keyup(function(){
    // Search Text
    var search = $(this).val();

    // Hide all table tbody rows
    $('table tbody tr').hide();

    // Count total search result
    var len = $('table tbody tr:not(.notfound) td:nth-child(2):contains("'+search+'")').length;

    if(len > 0){
      // Searching text in columns and show match row
      $('table tbody tr:not(.notfound) td:contains("'+search+'")').each(function(){
         $(this).closest('tr').show();
      });
    }else{
      $('.notfound').show();
    }

  });

});

// Case-insensitive searching (Note - remove the below script for Case sensitive search )
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
   return function( elem ) {
     return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
   };
});

3. Demo

Enter your text in the first column which you want to search on all columns and search only name of the user by entering text in the second textbox.


4. Conclusion

Above script filter your table content on the Client side and its only works with text type elements like – <label> ,<span>, <p>, etc. or if there is just text.

If you want this works with input element like – textbox, textarea also then you need to customize the script.

If you found this tutorial helpful then don't forget to share.

Related Post

Spread the love
  • 1
  •  
  •  
  •  
  •  
  •  

2 Comments

  1. Yusuf Bashir said:

    thank you very much for this code. i tried it and it worked but what if i want to show a “no record found” instead of the blank tbody it shows? i tried 2 codes but they aint working.

    Thank you

    June 19, 2018
    Reply
    • Yogesh Singh said:

      I have updated the tutorial and cover your asked question.

      June 19, 2018
      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *