Jquery Search Filter Example

Websolutionstuff | Aug-25-2021 | Categories : jQuery

In this small post i will so you jquery search filter example. here we will see how to search data using jquery filter. Many time we have requirment to filter or find specific data from html table so here i will i will show you how to create a filter using jquey.

Here, we will create table, search box for jquery search box. So, let's see how to search data using jquery filter.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>Jquery Search Filter Example- Websolutionstuff</h2>
<input id="myInput" type="text" placeholder="Search Here..">
<br><br>

<table>
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
  </tr>
  </thead>
  <tbody id="myTable">
  <tr>
    <td>Carry</td>
    <td>minati</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>Jery</td>
    <td>joe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>Demo</td>
    <td>roof</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>Jeff</td>
    <td>befos</td>
    <td>[email protected]</td>
  </tr>
  </tbody>
</table>

</body>
<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>
</html>

 

Output : 

how_to_search_data_using_jquery_filter

 


 

You may also like :

Recommended Post
Featured Post
Node.js MySQL Create Database
Node.js MySQL Create Database

In this tutorial we will see Node.js MySQL Create Database. For any kind data store or run query then we need database l...

Read More

Sep-22-2021

Laravel 11 Livewire Multi Step Wizard Form
Laravel 11 Livewire Multi Step...

In this article, we'll see how to create a multi-step form wizard in laravel 11 Livewire. Here, we'll see step b...

Read More

Jun-17-2024

How To Login With Magic Link In Laravel 9
How To Login With Magic Link I...

In this article, we will see how to login with magic link in laravel 9. Here, we will learn passwordless login with...

Read More

Feb-01-2023

How To Create Dynamic Bar Chart In Laravel
How To Create Dynamic Bar Char...

In this article, we will show you how to create a dynamic bar chart in laravel. charts are used to represent data i...

Read More

Jul-01-2020