Example of Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.example-jquery-filter{
margin: 20px;
}
</style>
<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>
<div class="example-jquery-filter">
<h2>jquery Filtering</h2>
<p>Type User Name or Email ID in search field</p>
<input id="myInput" type="text" placeholder="Search Here..">
<br><br>
<table class="table">
<thead>
<tr>
<th>Row</th>
<th>User Name</th>
<th>Email ID</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>1</td>
<td>Michel Clark</td>
<td>clark@gmail.com</td>
</tr>
<tr>
<td>2</td>
<td>Shane warne</td>
<td>warne@gmail.com</td>
</tr>
<tr>
<td>3</td>
<td>Ryan Haris</td>
<td>haris@gmail.com</td>
</tr>
</tbody>
</table>
</div>
Output
jquery Filtering
Type User Name or Email ID in search field
Row User Name Email ID 1 Michel Clark clark@gmail.com 2 Shane warne warne@gmail.com 3 Ryan Haris haris@gmail.com
