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?

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

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

[@JoeMcKenna-pu7kr]

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

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

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

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

[@kwanelekhumalo]

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

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

[@appuser]

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

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

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

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

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

[@codingwale8]

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

[@jodufan8754]

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

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

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

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

[@ifailu1]

You are a very gifted presenter. Please continue.

[@andreiradovici8184]

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

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

[@chaitanyahazarika9562]

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

[@CasualUploader-ey4rw]

We need more developers like u.

[@mrdbourke]

Excellent video! Thank you so much!

[@CuongNguyen-yh9dh]

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

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

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

[@r0wdybandit015]

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

[@frankdrolet9439]

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

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

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

[@beyaryoussefalhaji569]

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

[@zurdency4005]

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

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

[@SocksWithSandals]

That was a very well explained and very understandable example.

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

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

[@wheat4482]

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

[@environmentNow]

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

[@tahazia6340]

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

[@unjoined]

Loved it! Thank you very much!

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

You are the best, like always

[@ludkamotylikova3060]

Did you make it totally by yourself??? I would never ever be able to think this way and to make it.

[@martez_da_real]

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

[@lepen_macron]

if you have only like 5 or 10 thing to serach throw an easy way to do it is to get the input from the bar check with .includes(//the contents of the bar) and check for every title of the element you are searhing if it is, now if one element has the contents in it , then do a main.innerHTML = main.innerHTML + `

[@lepen_macron]

+ use to lowercase and make sure your sorting method has all lowercase identifiers + unfortunantly if instead of typing fortnite you type fortnute it wont show (just like the tutorial but keep in mind small mistake in speling make a difference)

[@r-i-ch]

Great stuff [except for the lack of a .catch() block] 😉

[@sonicalstudios]

Amazing tutorial I will be adding this feature to my site

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

[@jessiemoura9632]

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

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

[@ouvie]

omg tysm i was curious!

[@dentwa_1219]

I'm new here to web developing, so your's guides are awesome form for me to learn new and better thinks but' sadly I didn't find any video on how to create loading bar. On youtube there is lot's of videos, but i need only to show loading bar for a while and after that show page.. Could u please create some guide?

[@BAAAAAAAAAAA]

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

[@adeyemiblessing]

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

[@xenialxerous2441]

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

[@LucasPerrone-cp3kl]

I use your videos for my website that I am making but that bit of html for that box where you can text in I want to transform that into js.

[@malharsardeshmukh4057]

you make the things complex which is not necessary. Make it easy to understand for us

[@MaliturStudio]

Can you make a javascript video about: how to add users to this search system?

[@Ewout761]

Though, being the absolute newbie that I am, how do I make it so that I use my own list of things, and not a list of people that are not related to my project in any way?

[@guli670]

Thank you very much for these Videos there are very helpful

[@kienboy9999]

Hi Kyle can you make a video on organization of links for website

[@tseku210]

Been meaning to learn this

[@fotuneTechGlobal]

Got more than what I bargained for ...I just wanted to know how to add an icon to the search box ... Now I've got to learn fetch ... Win win tho.

[@jayashreejayashree9768]

great tutor, excellent presentation.

[@Dr.UdaraSenarathne]

Thank you very much!

[@hiGamePortal]

You are the best!

[@mznunaya]

You're a wizard.

[@kyleoliver8142]

Thanks Kyle, you're awesome 👌

[@OrincyWhyteDesigns]

KZbin is reading my mind 🥴😬 creepy! Way too perfect timing for this video to pop up on my page

[@andrewkiminhwan]

i was actually asked to create something like this in react for a senior swe interview

[@MrJettann]

Guys, can you tell me what the extension Kyle is using for auto formating code? Is it prettier? If yes, why my prettier doesn't do the same?)

[@thinhvo3904]

awesome content 👍

[@joeBalt279]

Any tips on how to make the results keyboard-accessible? Say a keyboard-only user needs to navigate through the results that were returned using only the up and down arrow keys. I assume there would be an eventlistener for keydown (or up?) and maybe tabindex?

[@kevinzunigacuellar]

Brilliant!

[@firearrow2010]

i have a problem with this code line: grid-template-columns: repeat(auto-fill, minmax(150px));, when i used it developer tools in Edge Explorer tell me it wrong, so why is that happening.

[@PrinceOnyegbule-p3y]

I have a project using html css and javascript to make an e-commerce website....With add to cart functionality....please I want to get the Html and css code u used in the add to cart video using javascript

[@Chetanoo]

Thank you! That video is really helpfull

[@maciejszaman]

how can you use functions on 'data' if you didnt use await

[@hadidagher9443]

how to sort these users based on location ( nearest to me ) :/ any tutorial for that ?

[@jamesclark2020]

Dang. ❤ I’m going to try this.

[@christianjack1250]

How to make search result displayed in dropdown of search box. And result has links to each user's page

[@amandalaura1746]

omg this helped me so much, thank you!! a really well explained straight foreward video

[@williambendix4916]

Is there any way to hide the cards until a user searches for them? Great video btw, keep up the good work.

[@theRealPadster]

Just create them with the "hide" class already added in the template

[@Avila-j4r]

@@theRealPadster How do you do that? i added the style="display:none" to the card class and the search characters don't bring up any cards

[@GonzaloMassa]

I wonder why you've added data-header and data-body, you could just query the header and body classes, right?

[@kevinzunigacuellar]

Yes but if he were to repeat a class inside the card then the search wouldn't work well. I think same goes for id's I don't think it's good practice to repeat ids in the dom. I like this approach because everything is well defined leading to less bugs.

[@GonzaloMassa]

@@kevinzunigacuellar yes, I know, but he isn't repeating those classes, that's why I asked 😊

[@alisherzaitov]

Hi! I‘ve found two methods to create a “clear input button” for a search bar. But I do not know which one should I use? Criteria: 1. The button should only appear if the input has a value 2. The ability to insert a custom icon (type=“search” is not suitable) 3. The input must be in focus after the button is clicked KZbin doesn’t allow links, so I leave a path on two codepen repositories: /MarufFrontDev/pen/ExEPoEp /dall4/pen/QWmyOWY

[@leelakrishna8009]

Wow creating a search bar with pure js n html hit 80k views.

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

[@alejandroarango4551]

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?

[@iBPMxJordy]

Hi, How would you go about adding an image in the cards?

[@tomasburian6550]

This isn't a search bar. It's a filter bar. In real projects that work with API-provided data, you use a button-enabled search to make requests, so it'd be perfect to offer people some code that can do just that.

[@kokojambo1298]

Thanks bro :)

[@hassaneoutouaya]

THANK YOU SO MUCH! I was just thinking about instead of transform the value to lower case before checking out if the user name or email includes it, what about using : const regex = new RegExp(value, 'ig'); const isVisible = regex.test(user.name) || regex.test(user.email); and it works perfectly, but which one is perfect for the runtime ?

[@akebengtsson1223]

compare runtime yourself :)

[@gamerbrothers1926]

Very good❤

[@raglock1433]

what if there is a lot more data to search through? if you for example have a news site that adds articles every day i would assume you dont want to save every single one in a variable and check every single one if it includes the letters

[@Ivaka_05]

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