Search multiple HTML Tables

Search multiple HTML Tables

by rippo

HTML

<input type="text" placeholder="Type to search" id="fruit-search">
<table class="table" data-search-field="#fruit-search">
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>
    
<br><br>
    
<input type="text" placeholder="Type to search" id="auto-search">
<table class="table" data-search-field="#auto-search" data-search-rows="#auto-rows">
    <colgroup>
        <col />
        <col />
    </colgroup>
    <tbody>
       <tr>
          <td>BMW</td>
          <td>Green</td>
       </tr>
       <tr>
          <td>Toyota</td>
          <td>Green</td>
       </tr>
       <tr>
          <td>Tesla</td>
          <td>Orange</td>
       </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">
                Records <span id="auto-rows"></span>
            </td>
        </tr>
    </tfoot>
</table>

CSS

body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
tfoot td {text-align: right; font-size: 12px;}
table {min-width: 219px;}

JavaScript

$.fn.searchableTable = function() {
    
    return this.each(function() {
        
        var data = $(this).data(),
            $rows = $(this).find('tbody > tr'),
            $searchField = $(data.searchField),
            $rowsCount;
        
        if (data.searchRows) {
            $rowsCount = $(data.searchRows);
        }

        $searchField.keyup(function() {
            var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
            
            var $filtered = $rows.show().filter(function() {
                var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
                return !~text.indexOf(val);
            }).hide();
            
            if ($rowsCount) $rowsCount.text($rows.length - $filtered.length);
        })
        .trigger('keyup');
    });    
};

// Initialize
$('.table').searchableTable();