How To Create A Search Bar In JavaScript

A search bar is something that nearly every application needs at some point, and luckily creating one is surprisingly easy. In this tutorial I will show you how to create a search bar and also how to avoid the common pitfalls of a search bar.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:33 - HTML
02:00 - CSS
05:04 - JavaScript (Getting User Information)
10:00 - JavaScript (Search Bar)

#SearchBar #WDS #JavaScript

[user]

I'm new to JS, but watching your videos, while not really making me understand everything, always seems to give me a lot more clarity on peripheral ideas to the video, plus giving me an idea of how to think about problems that are beyond my abilities for the time being

[Dsworddance]

I'm literally creating a project that needs a search bar right now, so this video was perfect timing

[Himanshu]

After spending an hour tryna figure out how the does the toggle hide functionality works so well, I finally understand.

It's basically has to do with the fact that classList.toggle("className", force) works differently with two arguments. One might assume that if force boolean is true, toggle will be performed, else ignored. But that isn't the case.

In case of two arguments:
- toggle will add the class if the second argument (force) is true.
- and remove the class if the second argument (force) is false.


That's why elements don't keep toggling when search is invalid consecutively.

[JasonKoolz]

As part of my college assignment, I was tasked with creating a review website, so this really helped in making it more fledged out and professional-looking. Thank you for the video, it's simple and really well done!

[stevemcardle]

Kyle. This is a filter not a search. Nobody building apps to search for a user would load ALL of the users first, especially if there are 1000's of them, to then filter them down. It would have been a much more realistic use case to create a search with typeahead functionality connected to a DB. This is a valid filter usage for other use cases but for users is just not realistic.

[AraliciaMoran]

Very nice video, and well made explanations. Just a small caveat : such a search shouldn't be used on a huge amount of data. When needing to filter through many entries, or through very large entries, it can be better to use a server-side filter.
This will often result in a faster result due to the server being able to filter faster than most devices, less data being transmited, and the ability to cache common search results to deliver the same response to multiple users.
This does go behond the scope of an easy tutorial, but I believe it's important to mention it, since I've seen people fall into the pitfall of using a full-javascript search for multi-thousand entries search; and it doesn't always goes well for them.

[bobdinitto]

I absorbed this video like a sponge in serendipity today because I happen to be working on an HTML search bar for my feathersjs client application right now. It's mostly working and I'm in the middle of chasing down some bugs but you've given me some great ideas to improve it. Thanks Kyle!

[kwanelekhumalo]

Dude!! How are you always able to no just solve my problems, but show me how I can simplify my code??? Every time!! 😂👏🏾👏🏾💪🏾💪🏾💪🏾

[vimwizard]

I just started learning js, i learn today arrays methods.., i don't understand how he made that search bar yet but i will come back later to see it again.

[GashyDev]

A good thing that might of been an idea to mention, is to set a stagger/delay to the fetch request itself if it's ever setup to trigger upon user input - IE set a 250/500ms timer, if the user hasnt made any additional inputs, fire the fetch request.

Because having a fetch request (to what would usually be a db or an API which has its own set of throttles) fire rapidly for each individual character could come with it own caveats overtime

[e.v.f]

2 years and you still manage to keep helping me. Thanks a lot!

[sayeghjoe]

Kyle you’re awesome. I can’t tell you how much I love your tutorials. It’s straight to the point, comprehensive, and consistently good.

[JoeMcKenna-pukr]

Yours are the best tutorials I've found on the web.

[JeremiKress]

Wow, as a JS newbie I've found that Javascript is very functional 😲

[threeone]

Thanks Kyle for not doing this with React.
I love straight JS!

[HandledToaster]

I love your channel. I love how you always take the time to explain how each new piece of code works, and why it's there.

You're an amazing teacher. I recommend your channel to everyone.

[Falzer]

This just made my life easier

Before I always make two objects, 1 for the full list of information and the other 1 is for filtering,
every input event a loop occurs to check if the letter typed by the user matches to any information thats in the full list object

Its brilliant that appending everything on the webpage and then hide those who doesnt match from the input

[vigormilo]

I replaced all data- selectors with class and id selectors and it works fine. i even added h1.header on top of the body and it still works as expected.

[elvinasss]

This is a more general tutorial for beginners who have good basics of JS. For Kylie to give a more fine-grained solution firstly the task must be properly specified, he just showed how search bar is implemented and how such things work in general which I think is a really good way to teach because you give general ideas, and not specific, very niche solutions. It depends on your use case. I do agree, debouncing, caching, and querying only the relevant records should be done, but if you want to learn try to implement something yourself, while it's nice to have everything served on the plate, it will only get you so far. Learn something new and with that knowledge build something that you didn't or couldn't do earlier. My advice for the viewers.

And also for those who are wondering why Kylie uses "data-" attributes to select elements. It's really just a preference as there are so many ways to select elements, by tag name, class, ids, selectors, pseudo selectors, and such. Stay with whatever way you like but be consistent, of course, it would be possible to use ids and classes easily here, but using "data-your-attribute" is quite a good way to remind yourself that you only select an element by its attribute, so you can mess around with ids and/or classes and be sure that JavaScript, the logic part won't break if class or id will be changed. Mentally it's easier to memorize that, because by keeping things clean you know that "data-" is for interaction in JavaScript, and classes, ids are only for CSS for example. Of course in the earlier days of JS, a lot of devs preferred to use ids to reference an element in JS, so ids wouldn't be used at all in CSS, it would be only used for JS, so I see Kylie did the same with data- attributes. Being consistent is what matters most.

Thanks Kylie for so many videos, I watch your every single video, to learn a thing or two or just to brush up my skills more which is very time efficient the way you teach :) By far the best source for learning JS-related stuff on YouTube.

[colindante]

With this tutorial I won't have to refactor anything. Thankyou for your clear explanation and throwing in new concepts that I wasn't aware of. So grateful)))