JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<input class="filter" type="text" />
<table>
    <tbody>
        <tr>
            <td>Dog chases cat</td>
        </tr>
        <tr>
            <td>Dog chases falcon</td>
        </tr>
        <tr>
            <td>Ant chases cat</td>
        </tr>
        <tr>
            <td>Dog chases mouse</td>
        </tr>
        <tr>
            <td>Fox chases cow</td>
        </tr>
        <tr>
            <td>Cow chases ant</td>
        </tr>
    </tbody>
</table>

JavaScript

//Filter Grid logic
$("tbody").attr('class', 'searchable');
$('input.filter').on('keyup', function () {
    // Construct array of search text
    var searchtext = $(this).val().replace(/^\s*|\s*$/g,'').split(/\s*,\s*/),
        // Construct new RegExp object
        rex = new RegExp(searchtext.join('|'),'i');
    
    $('.searchable tr').hide();
    $('.searchable tr').filter(function () {
        return rex.test($(this).text());
    }).show();
    
    //Always show the Header row
    $('tr.GridViewHeader').show();
});