JSFiddle - React, Tailwind, and code Playground

by agus makmun

HTML

<div class="title">
<h3>Products</h3>
</div>
<input type="text" id="search" placeholder="Type to search"/>
<table class="list">
<thead>
<tr>
<th class="left">List A</th>
<th class="right">List B</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="left">apple</td>
<td class="rightt">100</td>
</tr>
<tr>
<td class="left">snapple</td>
<td class="right">200</td>
</tr>
</tr>
</tbody>
</table>

JavaScript

var $rows = $('table tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    
    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});