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.