Search and filter

by JeroenSormani

HTML

<input type="text" id="search" placeholder="Type to search">
<table id="table">
  <tr>
    <td>Apples and pears</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Grapes and pears</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Oranges and pears</td>
    <td>Orange</td>
  </tr>
</table>

CSS

body {
  padding: 20px;
}

input {
  margin-bottom: 5px;
  padding: 2px 3px;
  width: 209px;
}

td {
  padding: 4px;
  border: 1px #CCC solid;
  width: 100px;
}

JavaScript

var $rows = $('#table tr');
$('#search').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase().split(' ');

  $rows.hide().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    var matchesSearch = true;
    $(val).each(function(index, value) {
      matchesSearch = (!matchesSearch) ? false : ~text.indexOf(value);
    });
    return matchesSearch;
  }).show();
});