Live Search in HTML Table Using jQuery

Jquery is a javascript library and easy to learn. In this tutorial, we are going to make Live Search in HTML Table Using jQuery.

It may be a good idea to use jQuery for small data search instead of auto search OR data table. You have to use jQuery Selectors for making a live search in HTML table. (Know more about jQuery Selectors)

You have to write only 10-12 line code to make a live search in Html Table using jQuery for your small app. Here, I write sample code with an example. You can use it for your application.

Live Search In HTML Table Using jQuery
Live Search In HTML Table Using jQuery


First, you need to create simple HTML table with a class name.

     <title>Live Search in HTML Table Using jQuery</title>
     <div class="form-group">
       <input type="text" class="form-control pull-right" style="width:20%" id="search" placeholder="Type to search table...">
     <table class="table-bordered table pull-right" id="mytable" cellspacing="0" style="width: 100%;">
       <tr role="row">
         <td>Brad Gree</td>
         <td>Software Engineer</td>
         <td>Wagner Kumar</td>
         <td>Software Engineer</td>
         <td>Salman Khan</td>
         <td>Software Engineer</td>
         <td>Zohair Raza</td>

Above code is simple HTML.

Now, include jQuery.

<script src=""></script>

After including above jQuery. We have to add jQuery code snippet for Live search in HTML table.

   // Write on keyup event of keyword input element
     _this = this;
     // Show only matching TR, hide rest of them
     $.each($("#mytable tbody tr"), function() {
       if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)

Above code work on on keyUp event to search records from HTML table. It’s really amazing use of jQuery for small application.

Let me know, If you have any queries OR suggestions.


2 thoughts on “Live Search in HTML Table Using jQuery

  • October 12, 2018 at 6:32 am

    it works as it is. Thank you. I have been searching for the right ajax search function for days, only this work nicely and easy to code.

    However, how can I use the search through retreived data from db not only displayed in the page? I display the data in pagination so not all data in one page.

    • October 24, 2018 at 11:56 am

      Retrieve data from database dynamically, you have to use ajax pagination.
      My demo is for jQuery HTML search.
      I will post demo in future.


Leave a Reply

Your email address will not be published. Required fields are marked *