xxxxxxxxxx
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
xxxxxxxxxx
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
xxxxxxxxxx
/*
Author: Mudit
Instagram: @pro.googler
*/
<html>
<head>
<title>Searchbar</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<center><input type="text" style="margin:15px;width:80%;padding:15px;" placeholder="Search Here" id="searchBar"></center>
<table border="1" cellspacing="0" cellpadding="10px" width="80%" align="center" id="dataTable">
<thead>
<tr>
<th>Name</th>
<th>Father's Name</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aman</td>
<td>Rohit</td>
<td>aman@domainName.com</td>
</tr>
<tr>
<td>Pankaj</td>
<td>Pappu</td>
<td>pankaj@domainName.com</td>
</tr>
<tr>
<td>Sonu</td>
<td>Vishl</td>
<td>sonun@domainName.com</td>
</tr>
<tr>
<td>Chandan</td>
<td>Shivam</td>
<td>chandan@domainName.com</td>
</tr>
</tbody>
</table>
<script>
$('#searchBar').keyup(function(){
var value = this.value;
$("#dataTable tbody tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
</script>
</body>
</html>
xxxxxxxxxx
//serching on table
$(document).on("keyup", "#searchInput", function() {
var input, filter, table, tr, td, i;
input = $(this).val();
filter = input.toUpperCase();
tr = $("#searchTable > tbody > tr");
// Loop through all table rows, and hide those does'nt match the search input
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td") ;
for(j=0 ; j<td.length ; j++)
{
let tdata = td[j] ;
if (tdata) {
if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
break ;
} else {
tr[i].style.display = "none";
}
}
}
}
});
//Note:- just you need to include jquery.
xxxxxxxxxx
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});