JSFiddle - React, Tailwind, and code Playground

by wind_chime18

HTML

<input type="text" id="search" placeholder="Search...">
<br>
<table>
    <tr><th>Unique ID</th><th>Random ID</th></tr>
    <tr><td>214215</td><td>442</td></tr>
    <tr><td>1252512</td><td>556</td></tr>
    <tr><td>2114</td><td>4666</td></tr>
    <tr><td>3245466</td><td>334</td></tr>
    <tr><td>24111</td><td>54364</td></tr>
</table>

CSS

input{display:block}
table, tr, td, th{
    padding: 2px;
    border: 1px solid #ccc;
}

JavaScript

$("#search").keyup(function() {
    var value = this.value;
    //$('td:nth-child(2)').hide();
    $("table").find("tr").each(function(index) {
        if (index === 0) return;
        var id = $(this).find("td").first().text();
        $(this).toggle(id.indexOf(value) !== -1);
    });
});


$("#search").keyup(function() {
    var searchthis = this.value;
        $("table").find("tr").each(function(index) {
            if (index === 0) return;
            $(this).css('visibility', 'collapse');
        });
        var searchArray = [searchthis];
        if (searchthis.indexOf(' ') > -1) {
            searchArray = searchthis.split(' ');
        }
        $("table").find("tr").each(function(index) {
            if (index === 0) return;
            var id = $(this).find("td").text().toLowerCase().trim();
            for (var i = 0; i < searchArray.length; i++) {
                var txt = searchArray[i].toLowerCase().trim();
                if (id.indexOf(txt) !== -1) {
                    $(this).css('visibility', 'visible');
                }
            }
        });
});