JavaScript Search Bar

Learn how to build a search bar with filter functionality in JavaScript.

Want to learn everything you need to know about Visual Studio Code? Check out Learn Visual Studio Code!

[novaria]

omg thank you so much! This was exactly what I was looking for. No need for bloated frameworks, overly-complicated dependencies with npm etc. And the code is super beautiful too.

[krisashehi]

One of the best tutorials I’ve ever come across. Super easy to understand, and the code looks super tidy.

[TrashyyChan]

you just saved me from failing a class!! This was legit my whole semester work and i struggled so hard with the fecthing of the data from a json file (not even the searchbar but that helped too!)
Thanks man for not just showing the searchbar but also the full process!!

[iwatchtoomuchhaikyuu]

easily one of the best tutorial videos Ive seen, everything simplified and explained clearly and well. !!! just subscribed

[amberw]

Bless up! 🙏 been struggling with a search function for two weeks and this just made it so simple and you were great at explaining it - not just running through everything super fast and confusing!

[mateinegrescu]

Thank you, this was very instructive! I am also wondering how I could use checkbox filters on top of the search filter. For instance limit the search to just members of the Slytherin house by having and checking a Slytherin checkbox.

[Jun-zqbn]

works wonders, and had much fun plugging this into my backend database. thanks alot!

[MichielvanderGragt]

Hi James, great tutorial. I am fairly new to JS and have a quick question about how you use the map method() to fill the string literals. Can I generate the outcome of another function inside a string literal? For example a list I generated somewhere else? Thanks! Michiel from Sweden

[rishiprasath]

Great! Now I can create an offline search with filtering. Good enough for working on a project without a database!

[zaurhasanov]

Thank you! I was really struggling with this functionality and other tutorials didn't really help

[mattmjlg]

Dude I cannot believe you would do something like this this is unbelievable I’m so proud of that guys like you are so smart and can figure out that this would help us out so much I am trying to start my own start up company but I can help with searching things up for my program and I’m very new so it’s not easy thank you so

[musadanjuma]

Great Tutorial James!!! looking forward to implementing this to the next app I'm developing... Thank you soooo much :)))

[ajaydev]

thx for your video ! question : i have 2 search bar 1 for desktop view and another for tab view how to impliment in both
?

[Aditya_Kumar__pass]

awesome. I was struggling to do this thing in react / next, took some time and worked !!

[codedynamics]

i had to just grab the input value using querySelector and it worked. Great video!! Simple to understand. Thank you!

[smjonas]

Thank you so much for this video! I am glad to hear that I don't need to learn a new Javascript framework for a simple search UI... It's sad that this basic stuff is so hard to find.

[denisradovanovic]

Hi James, would you mind sharing how can we use multiple words in a search to filter out, say for example: Diggory Snape? Thanks for great video.

[DeniTosh]

How would you access it if it was wrapped in an object? For example { - char:[the api]}.

[packagedstudios]

Thanks so much for explaining it so clearly :D

[aznn]

Thanks for this video man! Greetings from Brazil!