Search for a command to run...
no jQuery - only vanilla ES6 JavaScript
No comments yet. Be the first to comment.
Clean your email list even before sending it to a mass emailing solution like AutoSend to avoid a high bounce rate
Try using an alternative to openclaw, which they claim is cheaper to use
Using types (and interfaces) to define a blueprint of a variable
Using GraphQL as an alternative to REST API for Hashnode
making makemigrations work in Django when migrations is not pushed to git
These kind of client-side searchable functionality is done only in JavaScript.
But even the initialization of the table content is 99% of the time JavaScript-based where the developer has to feed in the entire initial cell data to an array and pass that array into to a function after which the 3rd party script / library would render the table into HTML and display it dynamically. This is cool - can be easily done in React, Vue or AlpineJS.
But what if wanted the table HTML coded first for reasons like a designer's preference or SEO where the search engines can 'see' the table initially ? (Now-a-days Google already can 'see' a JavaScript rendered table though)
Imagine just injecting a script to an HTML page which already has a large table coded in using table, thead, tbody, tr, th and td that the JavaScript code can read through all the values and then decide which rows to hide/display based on the existence of the search term !
The search box :
<div class="d-flex">
<input type="text" name="search" id="search" class="form-control" placeholder="type in a search term here"/>
<!-- <button id="btn-search" class="btn btn-primary ms-1">Search</button> -->
</div>
The table :
<table id="tbl-products" class="table table-light table-striped table-hover table-bordered">
<thead>
<tr>
<th scope="col" class="text-center">#</th>
<th scope="col" class="text-center">Year</th>
<th scope="col">Product</th>
<th scope="col" class="text-center">Starting Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="text-center">1</th>
<td class="text-center">2022</td>
<td>
<a href="/mac/13-inch-macbook-air-apple-m2-256gb/">
13-INCH MACBOOK AIR M2 256GB
</a>
</td>
<td class="text-center">₹1,19,900</td>
</tr>
<tr>
<th scope="row" class="text-center">2</th>
<td class="text-center">2022</td>
<td>
<a href="/mac/13-inch-macbook-air-apple-m2-521gb/">
13-INCH MACBOOK AIR M2 512GB
</a>
</td>
<td class="text-center">₹1,49,900</td>
</tr>
<tr>
<th scope="row" class="text-center">3</th>
<td class="text-center">2021</td>
<td>
<a href="/mac/macbook-pro-14-inch/">
MACBOOK PRO (14-INCH) 512GB 16GB
</a>
</td>
<td class="text-center">₹1,94,900</td>
</tr>
<tr>
<th scope="row" class="text-center">4</th>
<td class="text-center">2021</td>
<td>
<a href="/mac/macbook-pro-16-512gb-32gb/">
MACBOOK PRO (16-INCH) 512GB 32GB
</a>
</td>
<td class="text-center">₹2,39,900</td>
</tr>
<tr>
<th scope="row" class="text-center">5</th>
<td class="text-center">2021</td>
<td>
<a href="/mac/macbook-pro-16-1tb-32gb-2021/">
MACBOOK PRO (16-INCH) 1TB 32GB
</a>
</td>
<td class="text-center">₹2,59,900</td>
</tr>
<tr>
<th scope="row" class="text-center">6</th>
<td class="text-center">2020</td>
<td>
<a href="/mac/macbook-pro-13-with-M1-chip-512gb/">
MACBOOK PRO 13” WITH M1 CHIP 512GB
</a>
</td>
<td class="text-center">₹1,34,326</td>
</tr>
<tr>
<th scope="row" class="text-center">7</th>
<td class="text-center">2020</td>
<td>
<a href="/mac/macbook-pro-13-with-m1-chip-256gb/">
MACBOOK PRO 13” WITH M1 CHIP 256GB
</a>
</td>
<td class="text-center">₹1,15,526</td>
</tr>
</tbody>
</table>
The JavaScript :
let trs;
document.addEventListener("DOMContentLoaded", () =>
{
let tbl_products = document.getElementById('tbl-products');
let tbl_products_tbody_trs = tbl_products.querySelectorAll('tbody > tr');
trs = [...tbl_products_tbody_trs];
});
document.addEventListener("DOMContentLoaded", () =>
{
document.getElementById('search').addEventListener('input', (e) =>
{
let search = e.target.value;
trs.forEach(tr =>
{
let found = false;
[...tr.children].forEach(child =>
{
if (child.localName == 'th') return;
let cell = child.innerHTML.trim();
if (cell.toLowerCase().includes(search.toLowerCase()))
{
found = true;
return;
}
});
tr.style.display = found ? 'table-row' : 'none';
});
});
});
Demo : https://anjanesh.s3.amazonaws.com/search.html