Реалізація функції живого пошуку по рядках HTML таблиці з jQuery

При використанні великих html таблиць на сайті (наприклад прайс-лист на сторінці з цінами) може бути складно знайти необхідний рядок з інформацією, тому ми створимо простий пошук (фільтрацію рядків) по таблиці.

1) Спочатку створимо саму таблицю і поле для вводу пошукового запиту:

<label><input type="text" id="filter-table-input" placeholder="Що шукаєте?"></label>
<table id="filter-table">
    <thead>
    <tr>
        <th>Назва товару</th>
        <th>Код товару</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) В JavaScript файлі додамо jQuery код, який і буде фільтрувати рядки:

$(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)
        });
    });
});

Готово!

Живий пошук по рядках html таблиці за допомогою jQuery