In this tutorial, We will learn how to create a live search on the HTML table with a jquery example, We will show an easy example of a live search on the HTML table using jquery.
Example:
<!doctype html>
<html>
<head>
<title>Live search on the HTML table with jQuery Example</title>
<style>
table th, table td
{
width: 100px;
padding: 5px;
border: 1px solid #ccc;
background: #fff;
}
.notfound{
display: none;
}
input{
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
border:2px solid #e0e0e0;
}
</style>
</head>
<body>
<h2>Live search on the HTML table with jQuery Example</h2>
<input type='text' id='txt_searchall' placeholder='Enter search text'>
<br/>
<table width="60%">
<thead>
<tr>
<th>No</th>
<th>Language</th>
<th>Framework</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>PHP</td>
<td>Laravel</td>
</tr>
<tr>
<td>2</td>
<td>C</td>
<td>C++</td>
</tr>
<tr>
<td>3</td>
<td>Android</td>
<td>Webkit</td>
</tr>
<tr>
<td>4</td>
<td>Java</td>
<td>Meteor</td>
</tr>
<tr>
<td>5</td>
<td>C#</td>
<td>MuPDF</td>
</tr>
<tr class='notfound'>
<td colspan='4'>No record found</td>
</tr>
</tbody>
</table>
<script src='https://code.jquery.com/jquery-3.6.0.min.js' type='text/javascript'></script>
<script>
$(document).ready(function () {
// Search all columns
$('#txt_searchall').keyup(function () {
var search = $(this).val();
$('table tbody tr').hide();
var len = $('table tbody tr:not(.notfound) td:contains("' + search + '")').length;
if (len > 0) {
$('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;
};
});
</script>
</body>
</html>
Thanks, May this example will help you.