Whenever there is a large list of records that 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.
Contents
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'>
<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: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
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 to work with input elements like – textbox, textarea also then you need to customize the script.
If you found this tutorial helpful then don't forget to share.