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.
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>
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>
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>
Are you want to get implementation help, or modify or enhance the functionality of this script? Click Here to Submit Service Request
If you have any questions about this script, submit it to our QA community - Ask Question
Great thanks! It worked
This is a quick way to do what I was looking for… Is there an easy way to NOT search specific columns? So, if I just wanted to search the first column, I could desingate an id for that column (so they function only searches that cell)?
how to search the entire table(even the rows that are in the following pages)?
Thanks,,, It’s worked
Good topic
Video presentation is excellent to understand. Can You give me a brief explanation about jquery because i have learnt basic java. so, i have no idea about how filter on html table.