JSFiddle - React, Tailwind, and code Playground

by ardalis

HTML

<input id="searchInput" value="Type To Filter">
<br/>
<table>
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
        </tr>
    </thead>
    <tbody id="fbody">
        <tr>
            <td>Cat</td>
            <td>one</td>
        </tr>
        <tr>
            <td>dog</td>
            <td>two</td>
        </tr>
        <tr>
            <td>cat</td>
            <td>three</td>
        </tr>
        <tr>
            <td>moose</td>
            <td>four</td>
        </tr>
        <tr>
            <td>mouse</td>
            <td>five</td>
        </tr>
        <tr>
            <td>dog</td>
            <td>six</td>
        </tr>
    </tbody>
</table>

JavaScript

$("#searchInput").keyup(function () {
    // Split the current value of the filter textbox
    var data = this.value.split(" ");
    // Get the table rows
    var rows = $("#fbody").find("tr");
    if (this.value == "") {
        rows.show();
        return;
    }
    
    // Hide all the rows initially
    rows.hide();

    // Filter the rows; check each term in data
    rows.filter(function (i, v) {
        for (var d = 0; d < data.length; ++d) {
            if ($(this).is(":contains('" + data[d] + "')")) {
                return true;
            }
        }
        return false;
    })
    // Show the rows that match.
    .show();
}).focus(function () { // style the filter box
    this.value = "";
    $(this).css({
        "color": "black"
    });
    $(this).unbind('focus');
}).css({
    "color": "#C0C0C0"
});

// make contains case insensitive globally
// (if you prefer, create a new Contains or containsCI function)
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});