Это видео недоступно.
Сожалеем об этом.
JavaScript Search Bar
HTML-код
- Опубликовано: 14 авг 2024
- Learn how to build a search bar with filter functionality in JavaScript.
starter code - codepen.io/jam...
finished code - codepen.io/jam...
Harry Potter API - hp-api.herokuap...
James Q Quick - www.jamesqquic...
Learn Build Teach - www.learnbuild...
Want to learn everything you need to know about Visual Studio Code? Check out Learn Visual Studio Code!
Coupon - www.udemy.com/...
Build a Quiz App with HTML, CSS, and JavaScript - www.udemy.com/...
Facebook - / jamesqquick
Twitter - / jamesqquick
Instagram - / jamesqquick
![Finesse2Tymes & Og Boo Dirty - Real Recognize Real [Official Music Video]](http://i.ytimg.com/vi/3xb4bl5PWF8/mqdefault.jpg)
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.
Everything can be done with vanilla, and more robustly, too.
One of the best tutorials I’ve ever come across. Super easy to understand, and the code looks super tidy.
Ahhh so good to hear that!
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!
YASSSSSSS!!!
awesome. I was struggling to do this thing in react / next, took some time and worked !!
easily one of the best tutorial videos Ive seen, everything simplified and explained clearly and well. !!! just subscribed
Great! Now I can create an offline search with filtering. Good enough for working on a project without a database!
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!!
I like this one more then Kyle's from WebDevSimplifeid, no offense to Kyle though! You're both legends, thank you both!
bahaha I'll make sure to let him know!
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.
Thank you! I was really struggling with this functionality and other tutorials didn't really help
works wonders, and had much fun plugging this into my backend database. thanks alot!
i had to just grab the input value using querySelector and it worked. Great video!! Simple to understand. Thank you!
Awesome. Glad you got if!
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
You're the best teacher in RUclips, thanks so much
Ahhh thank you!!!
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.
Great Tutorial James!!! looking forward to implementing this to the next app I'm developing... Thank you soooo much :)))
Thank you :)
Great video, very clean and easy to undestand code. Great Job!!!
Thank you ;)
This is exactly what i needed for my project for this week hahha! seriously thank you so much !!!!!!! :)
James, i have a question, how can i do that search bar but using rick and morty api? i´m trying to do, but i have an error: array.filter is not a function :C . you are amazing!!. nice video
wow! thx u so much :) the best tutorial video on RUclips Ive seen!!!
Cheers, leveraged this tutorial to make a simple app using WordPress and the rest API
how can you make sure that for example if there where 2 harry potters but you needed only 1 it doesn't show doubles?
hey james thank you for the tutorial i'm just want to ask you i want to change the names and when it clicked on one of them it will take to another page can you help me pls ??
this tutorial is so good.
YAY!!
Thanks for this video man! Greetings from Brazil!
Wonderful tutorial, subscribed!
Great tutorial!
Thanks so much for explaining it so clearly :D
Thank you so much brother 🙏
Thank you very much James! I am having a workshop at my school, and I was wondering if you could help on how to change the json file of harry potter characters to another json file and make the searching work, I am trying but without success!! Great video by the way!
@@i-am-oi how did you change the Json file?
Thanks very much for this tutorial. I have learned a lot from this tutorial. Thanks
Glad to hear it!
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life.
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
I like your sense of humour. Nice tutorial man!
Haha thanks
thank you so much this video is very good
thx for your video ! question : i have 2 search bar 1 for desktop view and another for tab view how to impliment in both
?
Hi, May I know how to change the harry potter characters into other characters from other movies? Like changing the harry potter characters into avengers characters
This was amazing! It worked like a charm. Thank you so much!!!
can i ask you pls i want to change the names so how i can do that ?
Great tutorial, very well explained!
harry potter functions in javascript! love it!
how do i dynamically refresh my html with the final filtered array, iam dsplaying my index from database pls help
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.
nice man gracias otra vez!
Interesting, it looks like you are a little old school comparing to the " Web Dev Simplified", but anyway, it is a great guide.
Awesome video 👍
I Need A Help!!!
Please Tell Me How To Make Our Own API of Our Database Like Harry Potter API...
Thank you!
Really enjoyed it!!
This was great! Quick question, how would add functionality if you inserted a 'space' in your search query? Ie. search full name: Harry Potter
tks alot for this helpful tutorial.
Thank you very much
it says "failed to fetch".. how to solve it please?
Thanks a lot I hope i'll get my internship with this searchBar. I've learned a lot
Yayyyyy
thanks you so much!!! this very useful to me hope u release more video like this
Is there a way to have the unfiltered list hidden, then shown once it starts filtering? That’s what I’m looking for but can’t find a solution anywhere
Hello, I was wondering if it is possible to also search by Number? I am doing the Pokedex you did and am implementing this Search Bar, however I can't seem to search for the IDs and Names because of the .Lowercase()
You could certainly query by number if you want. Maybe you could have two different inputs, one being a number?
@@JamesQQuick Thanks. Rather than doing pokeman.id.includes(), I did pokeman.id == searchTarget
Sr. Thank you!
Thank you
How would you access it if it was wrapped in an object? For example { - char:[the api]}.
Character.map() doesn't work for me. It display map() is not function. How resolve problem ?
Thanks for teaching!
Excellent, thanks a lot!!
What font are you using, Master? 😍
Hey,does anyone know how to fetch data from mongodb in client side instead of using a url in fetch?
I want to know that how to create data in this link on herokuapp. hp-api.herokuapp.com/api/characters
why am I getting empty array when trying to console.log(hpCharacters) outside the async function
Hard to tell without code. I have a Discord where you can ask questions and share code. learnbuildteach.com/
this was great tutorial, i wonder if you colud help me, i got it to work but i would like it to let me look whit 2 words. i mean, what if instead of looking for "HARRY", i want to look for "HARRY POTTER" to give you some context: what if i wanted to look in an ecommerce for "white fridge"
i ask this because even when i got it to work whenever i put the "space" or (" ") it doesnt return any object. i am not an english native speaking so i hope you understand thanks
thank you very much, it was very helpful
but how do I make these work on a page I have done?
hello bro, can this javascript be used for any website or only for this one,
The man! Thanks!
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
THANKYOU
ty so much. You are a Star!
Amazing code ♥ I love it, I would like to edit the json, do you know if it is possible? I see there are some characters that do not have a photo. I would like to add one. Could it be possible? Thanks
thanks for the tutorial, its very helpful
Glad to hear it!
Great video thanks!
Thanks you so much for this video!
You’re very welcome!
Can I do this in Java Web App?
good job thnx
Very good sir I like it
Any idea how could i implement BACKSPACE? if i type too many letters and press backspace to erase wrong ones it shows that? because it is missing feature for me :) other than that very nice tutorial :)
How can I search with a button onclick instead of the onchange from the input?
Thanks a lot!
Thank you ☺️
thanks you so much !!!!
loved it a lot, would like to know how it can search through html or pictures that I have in an array or by event that i have i as cards
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life.
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
Really helpful thx
Sir, nice video. I'm beginner can you tell me please what's code or how to write api characters. I don't know which Language you use. Html, css, or javascript. How to write like you api characters
Hi James, Nice video. Im wondering if it is possible to list the characters in alphabetical order? If so how would you do it?
if your trying to sort the names in alphabetical order and the element for the name is formatted in full, this is what you want:
data.sort((a, b) => {
let splitNameA = a.name.split(" ");
let splitNameB = b.name.split(" ");
let lastNameA = splitNameA[splitNameA.length - 1];
let lastNameB = splitNameB[splitNameB.length - 1];
if(lastNameA < lastNameB){
return -1;
}else if(lastNameA > lastNameB){
return 1;
}else{
return 0;
}
});
thank you so much..,
while i using other api file, what are all sholud be changed? plz anyone help me out of this
Very nice !
saved my fucking life thanks
Thank you! :)
for some unknown reason which is driving me insane - i cannot seem to access the searchBar's id. Im getting null everytime !! i am lost. I used dom manipulation all the time. I can access the input tag by using querySelector but then i cannot grab the value of the element when the user keys up - soooo frustrating and now half the day is done ! 😡
Does not working. it shows error - 'hpCharacters.filter is not a function'
Exactly what i needed !! Thanks its look very simple when you know how to do 😁
Sorry if it's a lame question, but how to set up the api? Actually it's for my project, where I am trying to set up a search bar functionality where the search will filter results according to the "tags" present on each card. Each card may have multiple tags. Many thanks for the tutorial! Much appreciated.
Did you ever figure it out if not i can let you know
Hey thank you so much for replying!!
I did figure it out in the end, I simply added the tags as multiple class names to the cards and then filtered the results with js.
thank u
I thought this was dope man. I'm going to build this using the same API cuz in also an HP nerd.
Haha yes. Love it!
wouldnt it would be more logical if search checked from first letter moving forward and not if letter exist anywhere in the name?