Basic Table Live Search Plugin For jQuery - liveSearch.js

Basic Table Live Search Plugin For jQuery - liveSearch.js

jQuery PluginsjQuery Table PluginsjQuery liveSearch.js

Basic Table Live Search Plugin For jQuery - liveSearch.js

liveSearch.js is a minimal jQuery table filter plugin which allows to filter rows of an html table based on user input.

1. Import the latest JQuery library and the jQuery liveSearch.js script into the document.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="js/liveSearch.js"></script>

2. Create an input field that acts as a filter on the rows of your html table.

<input type="text" id="search" placeholder="Live Search...">

3. Add your tabular data into an html table which MUST have tbody and tr elements.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th colspan="2">Telephone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bill Gates</td>
      <td>55577854</td>
      <td>55577855</td>
    </tr>
    ...
  </tbody>
</table>

This awesome jQuery plugin is developed by IndianGhost. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 31.01.2018
  • Source