Search/Filter Table Rows Based On Input - table_search.js

table_search.js is an ultra small (< 1kb) jQuery table search plugin which allows the user to quickly filter table rows based on the text (case sensitive) typed in an input field.

How to use it:

1. Download and include the table_search.js script after the latest jQuery library (slim build is recommended).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="table_search.js"></script>

2. Create an input field to filter your long HTML table.

<input type="text" id="input">

<table id="table" class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Doe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Moe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

3. Enable the input field to filter the HTML table while typing.

// table_search(search,tr,indexSearch='0')
$('#input').keyup(function () {
  table_search($('#input').val(),$('#table tbody tr'),'012');
});

---

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