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!
