26 lines
1.1 KiB
Markdown
26 lines
1.1 KiB
Markdown
|
---
|
||
|
|
title: Filtering
|
||
|
|
tags: [webdev, javascript]
|
||
|
|
category: programming
|
||
|
|
---
|
||
|
|
|
||
|
|
I was watching the video [How To Create A Search Bar In JavaScript](https://www.youtube.com/watch?v=TlP5WIxVirU) by [Web Dev Simplified](https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw) 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.
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
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);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|