Live Search Through Table Rows Using jQuery And Regex

A minimal jQuery live search solution that enables a specific input filed to search through table rows as you type.

How to use it:

1. Add the CSS class 'myTable' to your html table.

<table id="myTable">

2. Add the CSS class 'myHead' to table's header.

<thead>
  <tr class="myHead">
    <th>Numer FIDa</th>
    <th>Opis pola</th>
  </tr>
</thead>

3. Create a text field to search through the html table.

<input type="text" placeholder="Search..." id="search_field">

4. Include jQuery library at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>

5. The main JavaScript to enable the live search on the html table.

$('#search_field').on('keyup', function() {
  var value = $(this).val();
  var patt = new RegExp(value, "i");

  $('#myTable').find('tr').each(function() {
    if (!($(this).find('td').text().search(patt) >= 0)) {
      $(this).not('.myHead').hide();
    }
    if (($(this).find('td').text().search(patt) >= 0)) {
      $(this).show();
    }
  });

});

---

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