How To Make Autocomplete Search Box For Website Using HTML CSS & JavaScript
HTML-код
- Опубликовано: 9 янв 2025
- Learn How To Create autocomplete search bar using JavaScript, Make auto complete search box for website using HTML CSS JavaScript
#JavaScript #JavaScriptProject
❤️ SUBSCRIBE: goo.gl/tTFmPb
In this video we will learn to make a search box or search bar for website, in this search bar we will add feature to auto complete the search query. When user will type anything in the search bar then it will display some similar search queries just below the search input box. User can click on the suggested search query to add it in the search bar. We will make this auto complete search-bar using HTML CSS and JavaScript. This is the best JavaScript project for beginners that you can add in your resume or portfolio.
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialsp...
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Connect with me:
👉 linktr.ee/iama...
Perfect. You did a great job. Love and respect for your hard work
Thanks bro I have leant many things from you.thaks for the creativity.I am Fahad
Thank you very much. Your video was very very helpful. It worked !!!!
Sending lots of love ❤️
Loved the video. Learn a lot. Thanks!
thank you very much i was able to defend my project today
Thanks Brother it was beautiful 🥰🥰🥰 love you
Glad you liked it. Thanks for your comment. 😊
Thank you.This video is very helpful.
Thank you very much. your vedio and explanation were amazing. learned alot and it is working fantastically.
Please do complete JavaScript tutorial. Thanks to you I feel great about my HTML and CSS. I will learn a lot from you if you have JavaScript tutorial.
I like this!!! Amazing guy! thanks forever!
it was very helpful bro thank alot
Just great content!! thanks alot!
U r cool man I like your videos
Thank you so much bro it's very helpful.
Easy Tutorials actually teach the easy way.
thanks bro you are doing great job
my goodness javascript is to difficult and crazy to learn but i dont give up
Very nice box sir..
Awesome, Thanks😃😃
wow really beautiful thank you sir for this.
😍Excellent
Thank you. 😊 Keep coding.
Thanks 🎉
You're welcome! 😊 Keep coding.
Thank you sir excelent tutorial
Instead of having to manually list all the keywords at 12:00, is there a way to simply refer to a list of HTML pages in the root directory?
Onkeyup is not working plz help me
@@peyyalakavya1733 make you you have the id name right and if that doesnt work try writing it as
document.getElementbyId("input-box") = function ( ) { }
create a .txt file with all your informations and read the file to create your possibleKeyWords
if there is something better you found tell me cause i am doing it this way
very helpful video thanks
thank you bro.... you are awesome
nice tutorial thank you soo much
Can you do a video on how to make an accordion that has the following properties:
1- The possibility of dragging and dropping between rows or accurately between accordions.
2- The possibility of entering or adding a new accordion.
3- Open the accordion through one click, but if you double click on any accordion, all accordions will open.
excellent video
How do you make it so then if you click outside of the list, the search box disappears? Or when you click the text, it completes a search?
do you found solution to this problem
Fantastic bro
thank you for super helpful video, can you tell the visual studio code's theme you using, it is very nice!
really well made video
Glad you enjoyed it
Awesome tutorial! Very easy to follow
Just a question can we do the same using eventlistener? for keydown or keyup ?
Yes - I did this and it works:
inputBox.addEventListener("keyup", () => {}
I subscriber of your channel please create video on tender website please.. Thank you
thank you! I i will consider that in my future tutorials
Thank you
Can you do a video showing Python Programming the following:
1.) Log-In- Sign-UP (PYTHON & DATABASE)
2.) Interactive Design
3.) And some examples of a website
Its mysql
thank you sir
Hi dear,
I like your tutorials & channel.
Please provide React js project would be better.
I hope you accept my request. ❤
in my computer, function selectInput not exist when I click a li. why is not working?
hi thank you for the video! may i ask what vscode theme you are using here?
how to add links in available keywords
i faced error in javascript file "onkeyup" function
cuz in JS is not "onkeyup", instead try: "keyup"
its "onkeyup" if you are using a event handler in html, like:
@@andreaspinheiro
Hello! Can you enter the full code for the input box? I can't do it , i feel like i did something wrong with the code. Thank you!!
Use event listener
Bro please make valentines card
Thank you for the tutorial but can you help me why the hover doesn't work for me?
You are amazing! Thanks for always teaching us something new... Can you make a mobile menu like Versace?
Now that I can search for items
How do I click on the item searched for and it take me to another page
do you found solution to this problem
How do you redirect to a web page/url when you click on some search result ?
How can I show "suggestions" in advance which are shown to user when user only clicks the search box as in the case of google search box. I request a guided video on this.
code didnt work "Uncaught TypeError: Cannot set properties of null (setting 'onkeyup')"
Yes it's work or not still
Heyy
I also have same error did you solve that if yes then how
When i typed something like How, no keywords list showed and it didn't work for me. i followed all your steps
How can I modify the code for me to get results in the website.
What I mean is, when I type ' hmtl' and then press enter key, there is no any other action, it's just stops there and nothing else.
Make a video demonstrating how to get results from the website when you press enter key
2:48
this video was cracked
Hi All,
This was a very helpful video, however, I do have a question:
Why do you pass in the global object "this" to the selectInput() function code snippet is below. Thank you for your assistance!
function display(result) {
const content = result.map((list) => {
return `${list}}`
});
resultBox.innerHTML=`${content.join('')}`
};
function selectInput(list) {
console.log(list)
inputBox.value = list.innerHTML;
resultBox.innerHTML='';
}
How do make the keywords directing to their content concerning
Hi sir I want to add search bar......but search don't work
Any think search
this error on onclick function
ReferenceError: selectInput is not defined
at HTMLLIElement.onclick (index.html:1:1)
Sir I downloaded the code , but the HTML code is not available, can I get any help from you.
hi im newbie how to add in blog plz guide.
how to add link i those searches if someone click that search it redirect him to that link pls tell
do you found solution to this problem
teach me to make a search engine in website, sir
I will make that in 2nd part soon.
@@GreatStackDev thank you very much sir🫡
Bro how to add link (href) it.
Can we click on it
yes you can click on suggested search term to write it in the search box
I don't know what is happening my JavaScript code is not working on my vs code
Mine is shown undefined. I can't fine the error.
How to make their links?
how to redirect to link when we search please tell me
do you found solution to this problem
@@SonuKumar-hz2ff yes
@@SonuKumar-hz2ff yes
How to add othe page link
my list don't vanish after clicking the input
Pls I need an answer on how to solve this
can you share the code?
source code pls
how to implement a site search ?
I will make that in 2nd part soon.
Sir where is source code
Onkeyup not working plz help me
. I can't manage. Can you help?
bro why not work class="fa-light fa-magnifying-glass" :C
you didn't add font awesome cdn link between your head tag
my search fetching speed is low
Bro how to add the links in each of the keyword ??? Need immediate
Your English is very hard to understand sir can't able to understand it properly
inputBox.onkeyup = function(){ this code isnt working
Bro, if you stop providing the source codes, many of us (2000 of us) will unsubscribe from your channel.
yes
Hi is there any chance i can contact in WhatsApp because i am interested to design my web page please thanks
Thank you very much, it is very helpful !
Mine is shown undefined. I can't fine the error.