Live search through html table rows using jQuery

When using large html tables on the site (for example, a price list on a page with prices), it can be difficult to find the necessary row with information, so we will create a simple search (row filtering) on the table.

1) First, let's create the table itself and the field for entering a search query:

<label><input type="text" id="filter-table-input" placeholder="What are you looking for?"></label>
<table id="filter-table">
    <thead>
    <tr>
        <th>Product name</th>
        <th>Product code</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Xiaomi Mi TV P1 43 Black</td>
        <td>ABC1234DE</td>
    </tr>
    <tr>
        <td>Xiaomi Mi Electric Scooter 3 Black</td>
        <td>FGH567I10</td>
    </tr>
    </tbody>
</table>

2) In the JavaScript file, add the jQuery code that will filter the lines:

$(function () {
    $("#filter-table-input").on("keyup", function () {
        const value = $(this).val().toLowerCase();
        $("#filter-table tbody tr").filter(function () {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });
});

Done!