JSFiddle - React, Tailwind, and code Playground

by kapilgopinath

HTML

<input id="searchInput" placeholder="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 () {
    var rows = $("#fbody").find("tr").hide();
    if (this.value.length) {
        var data = this.value.split(" ");
        $.each(data, function (i, v) {
            console.log(rows.filter(":contains('" + v + "')").length)
            rows.filter()
            rows.filter(":contains('" + v + "')").show();
        });
    } else rows.show();
});