How To Create A Search Bar In JavaScript

[@user5214]

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

[@cedricmendoza8316]

Just stick to it. You'll go back to these eventually and things you've learned here, will suddenly make sense later.

[@orzeszekyt4915]

same

[@ДианаДиана-с1г]

how are you doing now?

[@alessiacampana2320]

me too but i'm not english and this is complicated

[@UFO_808]

ey bro how da fuck is it going?

[@Dsworddance22]

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

[@anagnose]

Me too ;)

[@user-vd5im2mx5g]

I think that just means google is stalking you lol

[@observer-0_0]

mee too 🤗

[@001你好]

so now u could able to create search with ur own 😄

[@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!

[@stevemcardle2013]

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.

[@richardIambert]

What is typhead functionality?

[@stevemcardle2013]

@@richardIambert Hi Richard. As you type new searches are performed. This needs to take into account debounce so that not EVERY keystroke performs a new search, rather only do this after a user stops typing for X number of seconds

[@mariahkitsune3625]

Yeah I was wondering how this would be able to handle so much data. I'm actually trying to find a way to deal with 1000+ data for a project.

[@brandonampang2199]

How about don’t show the todos, and then show it when you type in the search bar

[@zalos5555]

​@@brandonampang2199 Bro it's a huge problem because first you will have to pull up 1000s of users... And then filter it, that's gonna take up a lot of time

[@e.v.f595]

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

[@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!

[@JoeMcKenna-pu7kr]

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

[@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.

[@Retrohertz]

Yes, agreed but I think he was just demonstrating how it can be done client-side.

[@tomblitz22]

Agreed. I'll add that search can be implemented more efficiently than a one-by-one-filter by using a data structure meant for that use case (even if done in browser-side js), and that on the server you have ElasticSearch at your disposal to do just that.

[@macd7743]

Thanks for drawing attention to this extremely important point.

[@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.

[@davidjamesmclean6325]

you have the best channel for web dev on youtube. Great explanations of the solutions.

[@HandledToaster2]

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

[@colindante5164]

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)))

[@hiyozumi]

your channel is so underrated. Thank you so much, it helps me a lot with my college projects!

[@codingwale8]

thanx bro i was making website for helping ayurvedic student and your video really helped me 😘

[@michaelparkernorton4841]

Mann way to go this is pro! I didn't even know about the html template tag. Very clear and smooth tutorial. Very well structured. Liked and subscribed.

[@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

[@mykalimba]

In this project, there's only one fetch request that's made the entire time. It runs once when the page is loaded, not every time the input changes.

[@raphaelwirnsberger6813]

@@mykalimba Thanks. Thats literally what I was just going to write right now.

[@GashyDev]

@@mykalimba I know its only applied to the initial load in this example, but i was more on about other use cases as not all the data is going to be loaded in straight away in every production scenario.

[@jamesclark2020]

My gosh that is awesome. I can definitely foresee myself watching this about 10 more times before I actually try to do it myself.

[@jamesabbott1517]

Just finished a coding bootcamp and your video is amazing at building on from what we learned. Your explanations are what make this video so great, thankyou! I think I wrote more comments than code!

[@HayWhy_Pappy]

How's the job search coming off after your bootcamp?

[@jamesabbott1517]

Going very well thank you! was lucky and managed to find a job very soon after the boot camp! Been at my new company coming on for a year now and loving it. Bootcamps are an expensive way into the industry and maybe not the right move for everyone. But if you research the right one for you, then they can be a fantastic path forward.

[@HayWhy_Pappy]

@@jamesabbott1517 Thanks for sharing man. Do appreciate the response.

[@ifailu1]

You are a very gifted presenter. Please continue.

[@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.

[@devop1646]

Very well explained. Even I don't know advanced JS still I understood what is done here, how and why. That's is what I expect from you. Thanks a lot!! @WebDevSimplified

[@appuser]

I love you, a quick tutorial to start the day. Bravo, my friend!😀

[@Himanshu86400]

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.

[@vigormilo168]

Hello Kyle, why are you using data attributes to select elements with querySelector and not the ids or classes that already exist on those elements?

[@kevinzunigacuellar]

It gives him more flexibility to add and repeat classes. I am not sure about ids but I don't think it's good practice to repeat ids since you usually create an ID to reference one element.

[@vigormilo168]

Ok but in this particular example he does card.querySelector(...) and not document.querySelector(...) so i don't think classes would be a problem if they are repeated elsewhere.

[@kevinzunigacuellar]

@@vigormilo168 card query selector is using document.query selector under the hood to reference the card template element. In this case he has a second query selector nested inside the card called data-header and data-body.

[@vigormilo168]

I will test this case and get back to you when I find some time. Thanks!

[@mykalimba]

I believe he uses data attributes as a personal choice. My personal choice is to use an id, as it is implicit that there should be at most one element that matches the id. IMO, using data attributes or class names in an instance like this is not the best choice, because you're looking for exactly one element in the document (or card), but it is technically possible for the data attribute or class name to be assigned the multiple elements.

[@threeone6012]

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

[@Pareshbpatel]

So much knowledge imparted in so short a time! - So fluently delivered. Thank you, Kyle. {2022-01-29}

[@ParodieHecker-mobile]

Such a nice comment. {2022-03-14}

[@JeremiKress]

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

[@vigormilo168]

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.

[@jodufan8754]

Basically only to know theres an search input type made the Video worth watching

[@andreiradovici8184]

Very useful and educative video. I want to thank you for your time and dedication. Good luck in everything man!

[@Ivaka_05]

6:04 I don't have data base, can I make a json file like this, but in the site’s folder and in fetch instead this link, to set the json file directory?

[@bailiojaycee233]

Alternatively, if you want to use a hyperlink or images from your data instead of just text, do: const hyperlink = card.querySelector("[data-link]"); const imgSource = card.querySelector("[data-src]"); hyperlink.href = user.link; imgSource.src =user.img;

[@matitos]

omg thx!!!

[@bailiojaycee233]

@@matitos Happy to help

[@martinn1071]

Legend!!! you always have ways of coding that blow my mind !! thanks so much for sharing this !! Quick questions tho, why don't you ever use query selectors like id's or classes? You're always creating html data attributes. There must be a reason behind it, and I'd love to know it. Again, you're awesome. Thanks so much for your content !!

[@UmairSadaqat]

The one thing you need to work on and what is it your playlist please organize your playlist when someone looking for a beginner to advanced JavaScript course your playlist is mashed up we all love your content and your design so consider this bro Love from Pakistan 🚀

[@CasualUploader-ey4rw]

We need more developers like u.

[@TheMetalMag]

u're amazing! u said can't know everything but u do and I'm always stunted by all the knowledge u got. I wish one day I get this ability with JS

[@tahazia6340]

i love u and your Mind Blowing Programming Skills...!

[@chaitanyahazarika9562]

U R LIKE THE BEST GUY IN THE WORLDDD DUDEEEEE AND WITH THE BESTTT HAIIRRRRR LOVE FROM INDIA

[@zurdency4005]

Love it. Very very simple and easy to understand. Thanks bro.

[@mrdbourke]

Excellent video! Thank you so much!

[@Ivaka_05]

10:47 It throws me this error "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')", why?

[@PandaciteYT]

Thanks So Much, All The Other People Just Showed Only CSS, and front end

[@RandellMonaghan]

Your tuts actually work and are easy as to follow. Do you have a course or something. where is the best place to learn code by you?

[@WebDevSimplified]

I have multiple courses at courses.webdevsimplified.com

[@singInTheDarkness]

You're the best. one day I would like to program with the ease with which you do it 🤩

[@RobertMcGovernTarasis]

One change I would make is to simply store a lowercase version of the name and email address when you store the user object. Rather than calling toLowerCase on name or email for all users on each and every single key pressed in the search bar.

[@eldenPango]

this is awesome contet!! earned a suscriber here!

[@frankdrolet9439]

Really good tutorial, quick and right to the point, that's what we need in 2022! Thanks

[@yanalashivaprasadreddy3010]

This is the video I have looking for. Thank you.

[@imuentinyannosarumen9789]

Love your contents man

[@jonasgustavsson7811]

6:09 how can "res => res.json" be one place down. which button you tap and 6:10 its down, i dont understand that!!

[@abdirahmanfarah4886]

Following you from somalia ,Thank you

[@imyou3627]

1:21 without css how you get that styled text and search bar that big

[@jonasgustavsson7811]

08:28 how can you take "})" down without...on the left sid eof the code, whoch button you press?!

[@BenjaminAster]

6:00 If you make the script a type=module, you can use top-level-await, so you don't have to use .then().

[@IAmLesleh]

Depending on browser support you require. Safari for example only added it with the very latest version, v15.

[@unjoined]

Loved it! Thank you very much!

[@SocksWithSandals]

That was a very well explained and very understandable example.

[@wheat4482]

Thank you so much man!! i really appreciate your content, gold as always.

[@sonicalstudios]

Amazing tutorial I will be adding this feature to my site

[@r0wdybandit015]

Damn dude... I did not know VS code had HTML shortcuts like that.... good stuff

[@adeyemiblessing]

I just spent 14minutes and 27 seconds examining the alignment of his hair 😂😂 By the way great tutorial

[@Thebiggestgordon]

I literally just submitted my cs assignment like an hour before watching this video, this would have been so helpful lol. Also what vscode add ons do you use? That autocomplete and auto format looks nice.

[@top10movies25]

I was a thinker when we were looking for something that shows the data programmed in PHP

[@jayashreejayashree9768]

great tutor, excellent presentation.

[@clnguye]

Kyle, you’re so good

[@environmentNow]

I love tour videos. (The only thing that ennoys me a little is that you never use a semi-colon)

[@mervinmarba7720]

man thanks for this clip... more power!

You are the best, like always

[@thuyatun3575]

i have never been more motivated to code. i just wished you would go abit slower because watching your videos are like a speedrun for me xD

[@BAAAAAAAAAAA]

Love the first search 💜💜 Time to become a purple monster 😈

[@MarshallSC1]

Any comparison between what way is better to use to populate elements on website? With html template element VS entirely through JS, with template literals ? From a performance standpoint, optimal performance standpoint, etc... Thanks!

[@peppenas7103]

Great video - one question tho - instead of "textContent" I need to append a image url to img src="". How do I do that?

[@jayde1992]

Did u figure that out?

[@akebengtsson1223]

setAttribute( 'src' , '*img url*')

[@thinhvo3904]

awesome content 👍

[@guli670]

Thank you very much for these Videos there are very helpful

[@voldemortvi4264]

i love your videos man , thank you so much

[@rajpatel9406]

Hey Web Dev Simplified i am confused here , what are you writing after class and template like " " and " thanks and your videos are by far the best among coding channels

[@fgsaldanha]

These are called data attributes. You can use them to store any information related to a particular element. Kyle put them there so he could select the elements later using querySelector (although I think using classes and IDs would have the same result).

[@rajpatel9406]

@@fgsaldanha thanks it helped a lot 👍👍

[@beyaryoussefalhaji569]

Can you please do a filter buttons as well, thank you

[@fosimuboolubo8891]

All I can say is thanks man.

[@tseku210]

Been meaning to learn this

[@manakupadhyay]

Hi Kyle, thanks for the video. Please make another video like this and show us how to use debouncing and throttling.

[@kyleoliver8142]

Thanks Kyle, you're awesome 👌

[@gamerbrothers1926]

Very good❤

[@xenialxerous2441]

Hi! Thanks for this amazing video. Even though it was simple, uncomplicated but informative.

[@martez_da_real]

I just spent 3 days trying to do this in react, this is so much simpler.

[@jessiemoura9632]

Hi, Kyle! I can't tell enough how much this video saved my school project haha. Thanks a lot. You're awesome 😁

[@CuongNguyen-yh9dh]

It would be great if you made a video about typescript. Thanks.

Very good work!! thanks!!

[@vrk1131]

6:09 how did he break the code into three lines. I wrote the same code on vs code and I also have prettier extension installed but the code is just on a single line. someone help

[@vrk1131]

@P S thank you bro. It worked. 🤩

[@vrk1131]

@P S ☺️

[@vrk1131]

@P S god bless you.

[@arvsnacs422]

This is short but as a self learner I need to understand how to connect/call the data from different nest or function. I hope i can recall this after a week and after i finish another project tutorial.

[@maresstefan3391]

Cool video! Question: How or is there a way that you can change the clear icon? Or can the search icon be styled with css?

[@tomasvn09]

I would hide the default state of clear icon and set a background image, with custom clear icon

[@krystianconfeiteiro7245]

Thank you! How can this be used to find content that is already on a website? I am trying to include a search bar on a website that can query the entire webite's content and pull up relelvant links in a small menu. Thanks in advance!

[@TheScriptingLegend]

The thing is just like with the search bars I’ve made in the past, if there is an exact match that’s comes after something that has the search term in it, the exact match won’t come up on top

[@mznunaya]

You're a wizard.

[@Chetanoo]

Thank you! That video is really helpfull

[@tobiasm161]

Great work! Thx How would you do that for searching a specific folder on you computer. The results then are as well shown in the html file?

[@triviagame_forever]

You are the best!

[@walaress]

Hey Kyle! if I decided not to use the Api for the card information, how can I make and array with the information manually input inside the data tag in the html?

[@jonasgustavsson7811]

14:02 how can you take both lines down one step ??!

[@recap0074]

Thank you🖤