How to Perform Live Search and Filter on HTML Table using jQuery


Real-time search or live search is a great feature for filtering records in an HTML table. Live search helps to provide a better user interface in your web project. There are many jQuery plugins are available to perform a live search and filter on HTML table. But if you want a lightweight solution, our code snippets will best choice for you. However, adding a live search feature to HTML table is very easy and you can implement without any jQuery plugin.
In this tutorial, we’ll provide a short code snippet to implement live search functionality on HTML table using jQuery. This live search functionality helps to filter data in real time based on the searched terms.

HTML

The following table HTML contains three columns (firstname, lastname, and email) with some sample data. A search input box is placed at the top of the table which allows the user to search and filter the data in the HTML table.

<div class="form-group pull-right">
    <input type="text" class="search form-control" placeholder="What you looking for?">
</div>
<table class="table table-striped" id="userTbl">
    <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>John</td>
        <td>Moe</td>
        <td>john@moe.com</td>
    </tr>
    <tr>
        <td>Mary</td>
        <td>Doe</td>
        <td>mary@doe.com</td>
    </tr>
    <tr>
        <td>July</td>
        <td>Rest</td>
        <td>july@gmail.com</td>
    </tr>
    </tbody>
</table>

JavaSctipt

The jQuery is used to search and filter the HTML table data based on the entered keywords. So, you should include the jQuery library first.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

The following jQuery is needed to add a live search feature to an HTML table. Take a look at workflow of jQuery code mentioned below.
The jQuery keyup event is sent to an element when the user types in the search input box.
The search keyword is stored in searchTerm variable.
The text content of the each <tr> is fetched by jQuery each() method and stored into the lineStr variable.
JavaScript String indexOf() Method is used to searching for the first occurrence of searchTerm in lineStr.
At last, matched row is shown and the unmatched row is hidden.

<script>
$(document).ready(function(){
    $('.search').on('keyup',function(){
        var searchTerm = $(this).val().toLowerCase();
        $('#userTbl tbody tr').each(function(){
            var lineStr = $(this).text().toLowerCase();
            if(lineStr.indexOf(searchTerm) === -1){
                $(this).hide();
            }else{
                $(this).show();
            }
        });
    });
});
</script>

Bootstrap

In our example code snippet, we’ve used bootstrap table structure. If you want to use the same structure for HTML table, you must include the bootstrap library.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2 Comments

  1. Khoa Said...
  2. Karthisri Said...

Leave a reply

Connect With CodexWorld