tarasis.net/_drafts/filtering.md

1.1 KiB

title tags category
Filtering
webdev
javascript
programming

I was watching the video How To Create A Search Bar In JavaScript by Web Dev Simplified to learn how to do a search bar in JavaScript.

What I realised as I was coding along, was that the video was reallymore about filtering data than what I might think of as a search bar. Which is fine, and totally not wrong, but I do find some of Kyle's choices suspect / curious.

For instance he uses data attributes for selecting elements from the html, and runs toLowerCase() on strings every single time you type a character. The latter to my mind seems incredibly wasteful.

searchInput.addEventListener("input", (event) => {
    const value = event.target.value.toLowerCase();
    users.forEach((user) => {
        const isVisible =
            user.name.toLowerCase().includes(value) ||
            user.email.toLowerCase().includes(value);

        user.element.classList.toggle("hide", !isVisible);
    });
});