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. Search all Columns
  3. Particular column
  4. Demo
  5. Conclusion

 

1. HTML

I have created two input elements for searching text and a table layout.

Completed Code

<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>
 </tbody>
</table>

 

2. Search all Columns

I am using the first textbox for all columns searching.

When keyup event triggers on the textbox then hiding, all rows of <tbody> and searching text on all <td> if its found then show the row.

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.

Code

<!-- Script -->
<script type='text/javascript'>
 $(document).ready(function(){
  $('#txt_searchall').keyup(function(){
   // Search Text
   var search = $(this).val();

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

  // Searching text in columns and show match row
  $('table tbody tr td:contains("'+search+'")').each(function(){
   $(this).closest('tr').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;
 };
});
</script>

 

3. Particular column

For searching on a single column I am using nth-child selector where I am passing column index position which is 2 for name column.

The other code and working will remain same as above.

Code

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

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

 // Searching text in columns and show match row
 $('table tbody tr td:nth-child(2):contains("'+search+'")').each(function(){
  $(this).closest('tr').show();
 });
 
});

 

4. Demo

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


 

5. Conclusion

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

Spread the love

Related Post

Be First to Comment

Leave a Reply

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