How To Jquery Live Search Filter Table

How To Jquery Live Search Filter Table

How To Jquery Live Search Filter Table

0 Sales

Free

A great feature for sorting records in an HTML table is real-time search or live search. Live search helps to give the web project a better user experience. There are many jQuery plugins available on the HTML table to execute a live search and filter. But if you want a lightweight solution, the best choice for you is our code snippets. Nevertheless, it is very easy to add a live search function to the HTML table and you can implement it without any plugin jQuery.


 

We will provide a short code snippet in this tutorial to implement live search functionality using jQuery on the HTML table. Based on the search terms, this live search functionality helps filter data in real time.

 

HTML

 

The following HTML table includes three columns with some sample data (firstname, lastname, and email). At the top of the table is a search input box that allows the user to scan and filter the information 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>[email protected]</td>

    </tr>

    <tr>

        <td>Mary</td>

        <td>Doe</td>

        <td>[email protected]</td>

    </tr>

    <tr>

        <td>July</td>

        <td>Rest</td>

        <td>[email protected]</td>

    </tr>

    </tbody>

</table>

JavaSctipt

The jQuery is used on the basis of the keywords entered to scan and filter the HTML table information. So, the jQuery library should be included first.

 

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


 

To add a live search feature to an HTML table, the following jQuery is required. Look at the jQuery software workflow outlined below.

When the user types in the search input box, the jQuery keyup event will be sent to an object.

The keyword of the search is stored in the parameter searchTerm.

Each < tr > text content is retrieved by each) (method jQuery and stored in the lineStr variable.

JavaScript String indexOf) (method is used to search for searchTerm in lineStr for the first occurrence.

The matched row is finally displayed 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

 

We used the structure of the bootstrap table in our example code snippet. If you want to use the same HTML table structure, the bootstrap library must be included.

 

<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>

LICENSE OF USE

You can use it for personal or commercial projects. You can't resell it partially or in this form.

PRODUCT INFO

Create Date : May 15, 2020

Updated Date : Jun 17, 2021

Ratings

Comments : 0

Downloads : 0