Perform Live Search and Filter in 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 for your web project. There are various jQuery plugins available to perform a live search and filter in HTML table. But if you want a lightweight solution, our code snippets will best choice for you. However, adding a live search feature to the HTML table is very easy and you can implement it without any jQuery plugin.

Live search operation can be implemented in HTML table using jQuery. In this tutorial, we’ll provide a short code snippet to implement live search functionality in HTML table using jQuery. This live search functionality helps to filter data in real time based on the searched terms.

HTML Code

Create an HTML table to implement live data search functionality. The following table HTML contains four columns (First Name, Last Name, Email, and Phone) 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.

<!-- Search input -->
<div class="input-group float-end">
    <input type="text" class="search form-control" placeholder="What are you looking for?">
</div>

<!-- HTML table data -->
<table class="table table-striped" id="userTbl">
<thead>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
        <th>Phone</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john.doe@example.com</td>
        <td>123-456-7890</td>
    </tr>
    <tr>
        <td>Demo</td>
        <td>User</td>
        <td>user@demo.com</td>
        <td>333-333-3333</td>
    </tr>
    <tr>
        <td>Text</td>
        <td>User</td>
        <td>test@demo.com</td>
        <td>999-999-9999</td>
    </tr>
</tbody>
</table>

JavaSctipt Code:

The jQuery is used to integrate live search and filter operation in HTML table data based on the given keywords. So, include the jQuery library first.

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

The following jQuery is needed to add a live search feature to an HTML table. Take a look at the workflow of the 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 the searchTerm variable.
• The text content of each
  is fetched by jQuery each() method and stored in the lineStr variable.
• JavaScript String indexOf() Method is used to search for the first occurrence of searchTerm in lineStr.
• At last, the 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>