How To Make Autocomplete Search Box For Website Using HTML CSS & JavaScript

Рет қаралды 102,016

Жыл бұрын

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
👉 easytutorialspro.com/go/course/
-------------------------------------
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/iamavinashkr

Пікірлер: 103

@LeonnieOkojie Жыл бұрын

Thank you very much. Your video was very very helpful. It worked !!!! Sending lots of love ❤️

@aniruddhadas9584 Жыл бұрын

Loved the video. Learn a lot. Thanks!

@tindimwebwahadijah9764 Жыл бұрын

Thanks bro I have leant many things from you.thaks for the creativity.I am Fahad

@miansohaibraheem 3 ай бұрын

Perfect. You did a great job. Love and respect for your hard work

@Touhid54 Жыл бұрын

Easy Tutorials actually teach the easy way.

@philippe_1776 3 ай бұрын

Thank you very much, it is very helpful !

@Teakito 5 ай бұрын

Thank you very much. your vedio and explanation were amazing. learned alot and it is working fantastically.

@arjunviskarma4449 8 ай бұрын

wow really beautiful thank you sir for this.

@yudha9049 7 ай бұрын

Thank you sir excelent tutorial

@lukekoletsios3236 11 ай бұрын

very helpful video thanks

@venkatsai563 2 ай бұрын

it was very helpful bro thank alot

@vishalchoudhari889 5 ай бұрын

thanks bro you are doing great job

@mdms4549 Жыл бұрын

Awesome, Thanks😃😃

@divyasai5787 Жыл бұрын

thank you bro.... you are awesome

@mohammedelhoussni Жыл бұрын

nice tutorial thank you soo much

@manhhoangtien540 Жыл бұрын

thank you for super helpful video, can you tell the visual studio code's theme you using, it is very nice!

@PraptiSharma-wx6fh Жыл бұрын

Very nice box sir..

@medipaksinha Ай бұрын

Thank you

@xen0076 Жыл бұрын

Just a question can we do the same using eventlistener? for keydown or keyup ?

@livelivelive2548 3 ай бұрын

Yes - I did this and it works: inputBox.addEventListener("keyup", () => {}

@3vibs Жыл бұрын

Fantastic bro

@ramakanttiwari835 5 күн бұрын

thank you sir

@emmersonwonka4475 11 ай бұрын

excellent video

@AduleLucky 6 ай бұрын

U r cool man I like your videos

@user-qt3zg8ww3d 5 ай бұрын

I like this!!! Amazing guy! thanks forever!

@mdabdulahallnomantuhin3621 27 күн бұрын

Thanks Brother it was beautiful 🥰🥰🥰 love you

@GreatStackDev 24 күн бұрын

Glad you liked it. Thanks for your comment. 😊

@oviyasi 4 ай бұрын

hi thank you for the video! may i ask what vscode theme you are using here?

@zearak Жыл бұрын

Thank you for the tutorial but can you help me why the hover doesn't work for me?

@newsplugghtv Жыл бұрын

You are amazing! Thanks for always teaching us something new... Can you make a mobile menu like Versace?

@AbrarulRhythm Жыл бұрын

Hi dear, I like your tutorials & channel. Please provide React js project would be better. I hope you accept my request. ❤

@ashishsrivastava4896 Жыл бұрын

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.

@johnmun1471 11 ай бұрын

in my computer, function selectInput not exist when I click a li. why is not working?

@calebstruble6386 11 ай бұрын

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?

@SonuKumar-hz2ff 5 ай бұрын

do you found solution to this problem

@hiwotina26 Жыл бұрын

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.

@pr4thamff157 Жыл бұрын

how to add links in available keywords

@newbe379 7 ай бұрын

my goodness javascript is to difficult and crazy to learn but i dont give up

@Anonymous55212 Жыл бұрын

i faced error in javascript file "onkeyup" function

@andreaspinheiro 2 ай бұрын

cuz in JS is not "onkeyup", instead try: "keyup" its "onkeyup" if you are using a event handler in html, like:

@justinisiahalcantara7951 2 ай бұрын

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

@to0ney252 7 ай бұрын

Awesome tutorial! Very easy to follow

@RemotTube Жыл бұрын

I subscriber of your channel please create video on tender website please.. Thank you

@GreatStackDev Жыл бұрын

thank you! I i will consider that in my future tutorials

@samuelmahiuha6259 Жыл бұрын

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

@chebkhaled69 11 ай бұрын

really well made video

@GreatStackDev 11 ай бұрын

Glad you enjoyed it

@Shaheryar-WebDev Жыл бұрын

I have practiced so much with your simple project videos thanks love from PAKISTAN🇵🇰

@GreatStackDev Жыл бұрын

thanks to you

@giftkabubi1089 4 ай бұрын

How do make the keywords directing to their content concerning

@rishi8919 Жыл бұрын

Sir I downloaded the code , but the HTML code is not available, can I get any help from you.

@hammeedabdo.82 Жыл бұрын

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.

@c_n_b 10 ай бұрын

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?

@peyyalakavya1733 9 ай бұрын

Onkeyup is not working plz help me

@TraeGeorge 9 ай бұрын

@@peyyalakavya1733 make you you have the id name right and if that doesnt work try writing it as document.getElementbyId("input-box") = function ( ) { }

@missipsamhamedannane454 6 ай бұрын

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

@jjaaddee205 Жыл бұрын

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

@_5ft8inch_ Жыл бұрын

Its mysql

@TheWriter-jx5pc 10 ай бұрын

Now that I can search for items How do I click on the item searched for and it take me to another page

@SonuKumar-hz2ff 5 ай бұрын

do you found solution to this problem

@AdibaIslam-or5qp 2 ай бұрын

Hi sir I want to add search bar......but search don't work Any think search

@user-mw1kh7cw4i Ай бұрын

this error on onclick function ReferenceError: selectInput is not defined at HTMLLIElement.onclick (index.html:1:1)

@BloodDawncss 8 ай бұрын

When i typed something like How, no keywords list showed and it didn't work for me. i followed all your steps

@kirtikumari1944 3 ай бұрын

Bro how to add link (href) it.

@hindibravenews Жыл бұрын

How to add othe page link

@user-jt8ym5on1r 10 ай бұрын

Mine is shown undefined. I can't fine the error.

@Anythinggoesmusic755 10 ай бұрын

how to add link i those searches if someone click that search it redirect him to that link pls tell

@SonuKumar-hz2ff 5 ай бұрын

do you found solution to this problem

@Demola704 Жыл бұрын

I don't know what is happening my JavaScript code is not working on my vs code

@freecs.2518 Жыл бұрын

Bro please make valentines card

@ChessGuruRaksh Жыл бұрын

From where do you get COLOR CODES

@GreatStackDev Жыл бұрын

web browser inspect element

@Fox_Gaming_H Ай бұрын

2:48

@Demola704 Жыл бұрын

Pls I need an answer on how to solve this

@ryancuy2765 Жыл бұрын

teach me to make a search engine in website, sir

@GreatStackDev Жыл бұрын

I will make that in 2nd part soon.

@ryancuy2765 Жыл бұрын

@@GreatStackDev thank you very much sir🫡

@KiremiYT Жыл бұрын

can you share the code?

@Demola704 Жыл бұрын

Can we click on it

@GreatStackDev Жыл бұрын

yes you can click on suggested search term to write it in the search box

@roumen1669 9 ай бұрын

code didnt work "Uncaught TypeError: Cannot set properties of null (setting 'onkeyup')"

@peyyalakavya1733 9 ай бұрын

Yes it's work or not still

@adityaranavat8470 4 ай бұрын

Heyy

@adityaranavat8470 4 ай бұрын

I also have same error did you solve that if yes then how

@sagarprasadz 7 ай бұрын

how to redirect to link when we search please tell me

@SonuKumar-hz2ff 5 ай бұрын

do you found solution to this problem

@sagarprasadz 5 ай бұрын

@@SonuKumar-hz2ff yes

@sagarprasadz 5 ай бұрын

@@SonuKumar-hz2ff yes

@user-bb3rl9lt9q Жыл бұрын

how to implement a site search ?

@GreatStackDev Жыл бұрын

I will make that in 2nd part soon.

@Anythinggoesmusic755 10 ай бұрын

source code pls

@hamzahasan5423 5 ай бұрын

Sir where is source code

@peyyalakavya1733 9 ай бұрын

Onkeyup not working plz help me

@thithi-em3lh 7 ай бұрын

. I can't manage. Can you help?

@Josu117 Жыл бұрын

bro why not work class="fa-light fa-magnifying-glass" :C

@BetYouHateMeNow Жыл бұрын

you didn't add font awesome cdn link between your head tag

@smallboy3559 7 ай бұрын

my search fetching speed is low

@rohanSubTopic 11 ай бұрын

Bro how to add the links in each of the keyword ??? Need immediate

@truthteachers Жыл бұрын

Bro, if you stop providing the source codes, many of us (2000 of us) will unsubscribe from your channel.

@irakammuralikrishna2884 Жыл бұрын

yes

@BonVoyage2020 Жыл бұрын

Hi is there any chance i can contact in WhatsApp because i am interested to design my web page please thanks

@kadampremal7225 4 ай бұрын

Thank you.This video is very helpful.

@user-jt8ym5on1r 10 ай бұрын

Mine is shown undefined. I can't fine the error.