But ...sir i need your help with a thing...i applied your code with two search bar but it has only worked with one search bar not with the second one 😫😫😫
Hey, in general what is the 'preferred' approach? 1. Pushing the content below the suggestions gently down with css animations or 2. Putting the suggestions on top of the below content?
This video is exactly what I need for my small project but there is one problem. Instead of just searching those words on Google, I need them to represent specific links to other parts of my page. Spent hours on internet, yet nothing indicates how to do so.
There is a mobile icon on the top left corner you've to click on that and there is a 3 dots vertical line on the top right corner.. Just click on that then there is shown some dock layout options.. You've to click on the separate dock option.
This video is exactly what I need for my project but there is one problem. Instead of just searching those words on Google, I need them to represent specific links to other parts of my page. Spent hours on internet, yet nothing indicates how to do so.
hope this isn't too late but use the< ahref="" and make a file in the folder to which you want to have the words go to and add the name of the page in the quotation mark so
A couple of questions: 1. Instead of adding onclick event on li level, can I add on ul level to make it more performant? 2. How can I add the functionality of close the autocomplete list on click anywhere like it happens in a modal
Hey man this is awesome!!! Just a quick question if you have time... how can I modify this so that the search bar filters through an array of objects instead of an array of strings?
Just go to Javascript file and there I've created a new li tag and pass the value of array or user... Just add tag inside li and put the url inside href attribute.
I wonder same thing , i want to search the goods i sale from my webpage. how that works , dont tell me i have to write all the goods i have to sale inside autocomplete area ?
Thanks, I have implemented and everything is ok except when I click with the input empty because an error is triggered with legend ZERO_RESULTS or INVALID_REQUESTS and I can't catch that problem to avoid the app brearks
how to make your own content list on search bar because its connect with google anyidea for me i thing i should remove the link of google and make a list and put class of list ???? i dont have no idea
If you want to retrieve any data from Google then you've to use api and to make your own content list.. First you've to store your content/info in the database then you can retrieve it according to the user query.
Sir i can paste all the codes correctly but it doesn't work properly it didn't show any suggestions what should i do sir please help me i have a project to do for my college please help me sir
I am writing a code and I got the error message “Uncaught TypeError: Cannot set property ‘onkeyup’ of null”. at this line of code ‘inputBox.onkeyup = (e) =>’ Can anyone tell me what I did wrong?
I've been trying to add an anchor . But I don't really know where . I saw your sample. But how if i want to link an html file . For example i search meaning of dog, then it would go to dog.html
In this video, I've only shown the design part and the intension to make this video was also for design purposes but if you've to add link in each suggestion item then you need to change and add many codes in JavaScript file. I'll think to make separate video for it.
Custom Select Menu with Search Box in HTML CSS & JavaScript
Watch: th-cam.com/video/z0avfnlBRto/w-d-xo.html
Thanks man I'm studying frontend and this is one important topic to master. I really appreciate it.
You're welcome.. Stay tuned 💙
Am here also for the same purpose hi five
THANK-YOU! THIS WAS JUST WHAT I WAS LOOKING FOR! Please keep up the great tutorials!! Cheers!
Thanks, will do!
this video is helpful for us.. thanks for efforts...sir
You're welcome 😁
Thank a lot dear 💕
Thanks for your ..help sir...that helped me for my college project 😍
Glad to hear that
But ...sir i need your help with a thing...i applied your code with two search bar but it has only worked with one search bar not with the second one 😫😫😫
CodingNepal is on Fire🔥🔥🔥🔥
Thank you 😍😁
Dude, you deseves milions of subscribers. Hope you get it soon😍
You are a real inspiration and motivation for me...
Really amazing 🤩 keep it up and Thank you for your video 🎥
Thank you so much 😁
I hope you teach every week. that amazing
I hope so too!
This video is what I expected, Thanks for the Video 😊😁
Can pls make a Tut on how to make the suggestions clickable pls ??? Btw your videos are very helpful ❤
Awesome, was waiting for this. Thanks
You're welcome... Stay tuned 😁
thank you bro , you save my proyect , good vibes
Glad I could help
Really clean build,
Thanks for tutorial🙏
Sai xa video
Love From USA (United State Of Arghakhanchi ) ❤️❤️
Thank you 😁
Thanks for all,it is very a understand
This is very helpful for me ....tnq ♥️♥️♥️♥️i am 14 😁
Wow.. Keep learning
Thank you sir for this video it helps me a lot
Hey, in general what is the 'preferred' approach? 1. Pushing the content below the suggestions gently down with css animations or 2. Putting the suggestions on top of the below content?
This video is exactly what I need for my small project but there is one problem. Instead of just searching those words on Google, I need them to represent specific links to other parts of my page. Spent hours on internet, yet nothing indicates how to do so.
Did you find this,if find plz tell me too
Use an tag inside the tag... like
About Us page
Shopping Cart
etc.
@@yayz_ You deserve millions of Thanks for your reply. This is exactly what I'm looking for.
I was loooing for this from a long time, i sa git and others but i didn't got the thing i wanted but ths is the video of which i was dreaming for
고맙습니다! 좋은강의😊
Please in English...
@@CodingNepal 고맙습니다! 좋은강의
ENGLISH
thank you! Good lecture translate by google translate
Thanks man very helpful 😍😍😍😍
I am very grateful, your tutorial is very helpful in my project :)
Glad to hear that!
Your designes are best thank you
You're welcome... Stay tuned 😁
Awesome, thank youuu💖💖
You're welcome 😊
Hey bro which application you are using for check responsive page at 2:07 please reply
It's a developer option of chrome.. Just press ctrl+shift+i to open it on chrome.
@@CodingNepal but bro here not opened like your page, here just opened console that also opened by f12 key
There is a mobile icon on the top left corner you've to click on that and there is a 3 dots vertical line on the top right corner.. Just click on that then there is shown some dock layout options.. You've to click on the separate dock option.
@@CodingNepal thanks for help me bro ♥️, you are osm👍
This video is exactly what I need for my project but there is one problem. Instead of just searching those words on Google, I need them to represent specific links to other parts of my page. Spent hours on internet, yet nothing indicates how to do so.
hope this isn't too late but use the< ahref="" and make a file in the folder to which you want to have the words go to and add the name of the page in the quotation mark so
@@Lol-yi7ic we cant talk more about this at my disc, go to my channel..
Great thanks 🙏🙏🙏😊
Same problem
@@maltitiwari5785 prob fix?
I just subscribe to your channel and like man you are a god 🙏
Thank you so much for it
thank you so much for your effort!
My pleasure!
this awesome bro.. nice
Thank you bro.. Stay tuned 😁
Thank you it was really useful
thank you very very much
You're welcome
THanks Bro I used your this video in my making youtube template (html/sass/js)
Great!
Hey Bro,
Just need some help. If you had a really long list of data, how would you limit the search to let's say, 5 results?
I've already answered this.. Here is the link www.codingnepalweb.com/search-bar-autocomplete-search-suggestions-javascript/#comment-2146
A couple of questions:
1. Instead of adding onclick event on li level, can I add on ul level to make it more performant?
2. How can I add the functionality of close the autocomplete list on click anywhere like it happens in a modal
I love you too
@@maltitiwari5785 go away creep
It's nice..just the BG music is killing
Thank you soo muchh!! sir for this video and code!
You're welcome 💙
From 19:15 to 19:25 you are creating an xss vuln by feeding user input to innerHTML without sanitizing content.
Your tutorial really super good 👌❤️. How to Create pos system php barcode scan product how to retry
Thank you but I didn't understand what you're trying to say.
@@CodingNepal I think he wants a bar code scanning system with php
You are not best. Why?
You are beast!!!
Thank you 😍😁
dhanyawaad dada🙏
one suggestion bro please do coding with explaination it will be helpful for us
Hey man this is awesome!!! Just a quick question if you have time... how can I modify this so that the search bar filters through an array of objects instead of an array of strings?
Damm bro🔥❤️
Thanks bro 😁
and what to do if we have to insert the link for particular search.
You mean you want to add link in suggestion list..?
@@CodingNepal yes bro
Just go to Javascript file and there I've created a new li tag and pass the value of array or user... Just add tag inside li and put the url inside href attribute.
Hello, did you solve it?
@@CodingNepalplease sir explain it where should i insert link
Next wish for working comments
Big fan.
Means...?
@@CodingNepal he wants a comments section with PHP I think
@@CodingNepal I want a working comments on html website please
Thank you brother it’s working
2:23 It Starts!
Thank u so much for the tutorial bro
My pleasure
@@CodingNepal but what if the value inside tag has a same value? How to not show it if they have a same value/innerText inside li tag?
in place of suggessions can we use mysql database information???
I wonder same thing , i want to search the goods i sale from my webpage. how that works , dont tell me i have to write all the goods i have to sale inside autocomplete area ?
bro please tell when we are click on search it redirects to google and get the element.Please tell how to change it and insert a link in that
In the Javascript file there are two google links which are used to redirect the user to google.. Just remove these links and put your url/link there.
@@CodingNepal and what to do if we have to insert the link for particular search.
If i want more than one search bar like this, what will change in JS?
Thank you very much for your tutorial. Could you please suggest me, how may I add this search bar into WordPress?
its works thanks a lot
very useful 3ks!
Glad it was helpful!
you are really awesome
Thank you 😁
bro please tell what to do if we have to insert the link for particular search.
You mean you want to add link in suggestion list..?
Thanks bro , but how i can add link for the suggestions list ?
Is there any way to make it search the stuff people post for sale on my webpage ?
very helpful
Glad it helped
Bro , my code is as same as your code but still suggestions is not showing , how can I fix it ?
You may did some mistakes.. Please check your codes with this tutorial codes... Codes link in the description
@@CodingNepal it's working now , thank you.😇😇😇😇
You're welcome 💙
@@Jay12113 Hello, how did you solve the error ?
if we ad about 1000 search options we add single and single to li list? or we need other language to writing this?can 'u help me?
Thanks, I have implemented and everything is ok except when I click with the input empty because an error is triggered with legend ZERO_RESULTS or INVALID_REQUESTS and I can't catch that problem to avoid the app brearks
It's great but is there any way to get suggestions from Google or so
In arrays for better experience
Yes you need to use api for that.
@@CodingNepal please make a video on it shortly
hi master, thank you so much for this tutorial. it very nice. but How to autoselect option depending on input's value(a dabase value)
Hi...need your help, im try to adapt your code with Json list with 7 properties and value by person
The data cant be filter, thats the error i have
thank you so much
nice tutorial bro... but can i redirect the search to my other html page?
Yes just remove the Google link and add your page link in js file.
@@CodingNepal thanks
@@CodingNepal please make tutorial search icon if the icon clicked the icon will swipe left
@@CodingNepal do we need to put that in suggestions or the other one??
Awesome
Thank you.. Stay tuned 😁
Hello CodingNepal, great tutorial, but how do i insert links into the suggestion list. So when I click on a suggestion, a specific link opens.
You've to add anchor tag inside li tag in javascript file.
@@CodingNepal where to add anchor tag?
i dont see a li tag in javascript file
same issue
how to make your own content list on search bar because its connect with google anyidea
for me i thing i should remove the link of google and make a list and put class of list ????
i dont have no idea
?????
If you want to retrieve any data from Google then you've to use api and to make your own content list.. First you've to store your content/info in the database then you can retrieve it according to the user query.
Sir please make a tutorial on search field on our own website
Sure and stay tuned
When sir.....?
@@CodingNepal
Yes , a own search engine for a own website inside, I will recomend your channel to my friends.
Bye thanks
Please make a best responsive designes of social sites like facebook instagram etc
Ok.. Stay tuned 😁
how can i do in the web site not only in console
I didn't understand.
How do u make it search the stuff on the webpage? When I have contents on the web page
THX!
Can I have two dependent Textfields using Autocomplete?
Thanks. Bro
You're welcome... Stay tuned 😁
How do you redirect to a page/url when you click on search result ?
I have error in suggBox.innerHTML = listData ;
it say "Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')"
did you figure it out?
thank you man
Thanks you bro
You're welcome bro 😁
@@CodingNepal bhai source code de do apne website par
Up and down arrow does not work on suggestion, please help
Yes it not work because I didn't code for it.
@@CodingNepal will you please do that
How can I make what you put in the input take it to google
? And good video!
will you please reply here how would i link a file
Sir i can paste all the codes correctly but it doesn't work properly it didn't show any suggestions what should i do sir please help me i have a project to do for my college please help me sir
I am writing a code and I got the error message “Uncaught TypeError: Cannot set property ‘onkeyup’ of null”. at this line of code ‘inputBox.onkeyup = (e) =>’
Can anyone tell me what I did wrong?
Thank you!
But please use instrumental music, vocals are distracting
is this tutorial includes the search filtering already?
Hope you notice my comments.
Will you please type here a sample code on how i link a html file on search button.
I've been trying to add an anchor . But I don't really know where . I saw your sample. But how if i want to link an html file . For example i search meaning of dog, then it would go to dog.html
In this video, I've only shown the design part and the intension to make this video was also for design purposes but if you've to add link in each suggestion item then you need to change and add many codes in JavaScript file. I'll think to make separate video for it.
I am your 1k liker without me 999 😉😉
how we give href links to the li tag in js
How can we add different links to each suggestion?
what about no match found? how do you implement that
How to put a url or description like
[
{
"title" : "titlee",
"category" : "category",
"tags" : "tagss",
"url" : "urll",
"date" : "dataa"
}
]
Means... It's an array..
Can you please show search bar with auto-complete search suggestions with links using html css and js
Just add anchor tag in each li of this tutorial codes.
Thanks for the video, but the keyboard navigation does not worked switching from text to result
Hey jaya, You solved the problem?
I want the code to search in my database, not on google. You have any code or solution for that??
Any way to make this multi select?
what to do if the icons are not visible?
Because the CDN link that I have used for icons not work anymore. So replace the line no.7 script tag with this:
4:56 the search bar is a bit sus you know