JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<input type="text" id="filter" />
<table id="table">
    <tr>
        <td>foo</td>
        <td>1</td>
    </tr>
    <tr>
        <td>bar</td>
        <td>2</td>
    </tr>
    <tr>
        <td>some</td>
        <td>3</td>
    </tr>
    <tr>
        <td>other</td>
        <td>4</td>
    </tr>
</table>

JavaScript

// Function
 function filterTable(value) {
     if (value != "") {
         $("#table td:contains-ci('" + value + "')").parent("tr").show();
     }
 }

 // jQuery expression for case-insensitive filter
 $.extend($.expr[":"], {
     "contains-ci": function (elem, i, match, array) {
         return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
     }
 });

 // Event listener
 $('#filter').on('keyup', function () {
     if ($(this).val() == '') {
         $("#table tbody > tr").show();
     } else {
         $("#table > tbody > tr").hide();
         var filters = $(this).val().split(' ');
         filters.map(filterTable);
     }
 });