%LIKE% Search

This is a simple way to filter search results using JQuery. It can also be useful when filtering data that was imported from a database, stored in an array, and echoed out dynamically for a user to see, with the data-filter values set to equal the array items' contents.

HTML

<label>Search beginning of string: </label>
<input id='search1'><br>
<label>Search anywhere on string: </label>
<input id='search2'><br><br>
<table>
    <tr>
        <td data-filter='Internet Explorer'>Internet Explorer</td>
        <td data-filter='Mozilla Firefox'>Mozilla Firefox</td>
        <td data-filter='Google Chrome'>Google Chrome</td>
        <td data-filter='Apple Safari'>Apple Safari</td>
        <td data-filter='Opera Browser'>Opera Browser</td>
    </tr>
</table>

CSS

td {
    border: 1px solid black;
    text-align: center;
}

JavaScript

$('#search1').on('keyup', function() {
    var val = $.trim(this.value);
    if (val) {
        $('td[data-filter!=' + val + ']').hide();
        $('td[data-filter^=' + val + ']').show();
    } else {
       $('td[data-filter]').show();
    }
});


$('#search2').on('keyup', function() {
    var val = $.trim(this.value);
    if (val) {
        $('td[data-filter!=' + val + ']').hide();
        $('Mozilla Firefox*=' + val + ']').show();
    } else {
       $('td[data-filter]').show();
    }
});