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

hi guys this is Avinash and you are welcome to my another video and today in this video we will learn how to create a autocomplete search word using HTML CSS and JavaScript in this search word if I start typing anything let me write how and you can see it will display the related search term if I write something else if I write s so it will give all the Search terms related to this keyword and let me add anything else here you can see it is giving two search term related to this keyword so if I click on any one it will add that particular search term in this search box so it will complete this search text we will create this autocomplete search bar using HTML CSS and JavaScript so before starting this video please hit the like button and subscribe my channel now let's start this video here I have this folder and in this folder you can see one HTML file one CSS file let me open these files with my code editor which is Visual Studio code you can use any code editor so this is the HTML file where I have added the basic HTML structure and this one is the CSS file in this CSS file I have added margin padding font family and box sizing these CSS properties are applicable for all the HTML elements in this HTML file I have added this link tag that will connect the HTML and CSS file and here I have added the title for this webpage next we will add some codes in the body tag so here we will create one div with the class name search box in this search box we have to add one input field and one button in the horizontal line so let's create one div with the class name row and within this row we will add one input field so let's add the input and input type will be text and with this text let me add one ID also so the ID is input box after that we will add the placeholder for this input box in this placeholder we will add the text search anything so after adding this placeholder we will add one more thing that is autocomplete off so this autocomplete off will turn off the feature to auto complete your input field based on the inputs saved in your browser after that we will add one button and in this button let's add search we will change it later after adding this let's come back to the folder and open this HTML file with any web browser so you can see this input field and this button search now we will close this browser and I will open it with the visual studio code extension called live server so it will refresh the website automatically whenever we will add any changes in the code file now let me come back and we will add some CSS so in this CSS file first we will add the body tag in this body will add the background and for this background we will add one color code and then we will add the color that will be the text color after that we will add the CSS for this search box let's copy this one add it here for this search box we will add the width it will be 600 pixel then we will add the background so let's add the background white and then we will add the margin here we will add the margin of 200 pixel from the top then left right Auto and zero so it will get equal space from the left side and right side and at the top it will have 200 pixel space then we will add the Border radius of 5 pixel after adding this we will come back and here you can see this horizontal line in white color and here we have the input field and search button next we will add the CSS for the row that we have added here let's copy this one and add it in the CSS file for this row we will add display Flex align item Center then we will add some padding 10 pixel from top and bottom and 20 pixel from left and right side then we have the input field like this so here we will add input and in this input we will add Flex 1 so it will use the all space available in that row then we will add the height height will be 50 pixel and background we will add transparent after that we will add the Border it will be 0 and outline also 0. let's add the font size so the font size will be 18 pixel and we will change the color that will be the text color inside this input field now you can see we have the height for this input field and this search button is in the right side so instead of this search text we will add one icon to add one icon we will come to font awesome website open this website font awesome.com here you have to create one free account then click on kits then click here and here you will get one line of a script just copy this one and add it here in this HTML file before closing hit tag after that we can add any icon on our website just click on this icons and in this search box we can search for any icon so here we will search for magnifying glass let's click on the first one and copy this HTML code just copy and come back to the HTML file and instead of this search we will add this icon after adding this come back to the website you can see this search icon in this button now we have to design this button and this icon so let's come back and in the CSS file here we will add button we will remove the background so background will be transparent then border 0 and outline 0. after that we have added the icon in this button so right button and here we have the class name called fa solid copy this add it here so this is for the icon here we will add the width for this icon so the width will be 25 pixel and we will change the color of this icon then we have to add the font size so the icon will be large 22 pixel and we will add the cursor pointer after that you can see this icon looks good next we will change the color for this text which is in the placeholder here you can see the text search anything so we will change its color let's come back here we will add double colon placeholder and just add the color you can see some difference in this color now we have designed this simple search box we can write anything in this search box like this next we have to add some suggested keywords in this search box so let's come back and here we will add one div so let's add the div with the class name result box in this result box we will display the list of keywords that will be available for autocomplete this search so for now let me add only two keywords we will add ul and Li and in this one we will add JavaScript and let's add web development and after that you can see these text here so next we will add the CSS for these text so just come back and here we will add that class name result box and in this result box we have added the UL so for this UL let's add the border top so the Border top will be 1 pixel solid and this color code there will be one horizontal line at the top after that we will add the padding it will be 15 pixel and 10 pixel in this UL we have the LI also so let's add Li and here we will add Lister style in an then we will add the Border radius it will be 3 pixel and here we'll add the padding it will be 15 pixel and 10 pixel then cursor pointer after that you can see one horizontal line here at the bottom of this search box and then we have the suggested keywords and next we will add the hover effect for these suggested search term so let's come back and here we will add this one and write hover here we will add one background color so right background and one color code after adding this come back to the website you can see the hover effect on this suggested search term when I take cursor the background color is changing but right now these suggested keywords are displaying by default so we have to hide this one and it will be displayed based on the input that we will add in the search box so let's come back and here we will remove this one and we will display the suggested search term using JavaScript so now we will create one more file so let me click here to create a new file and here we will add the file name autocomplete dot Js so we have created one new file which is blank right now next we have to link this file with the HTML file let's come back to the HTML file and above this closing body tag here we will add the script SRC and in this SRC we will add the file name autocomplete dot JS so the HTML file and the JavaScript file is now connected next we will add some JavaScript code here in this one we have to create one array that will contain all the suggested search term for that we will add let we will add any name available keywords you can write anything I am writing available keywords equal to this and within this one we can add any number of suggested keywords so let me add multiple keywords here so here we have added some suggested search term that will complete the search box to display the search term in the search box we have to get these elements which is input this result box here we have the ID input box and here we have the class name result box let's come to the JavaScript and here we will add const results box equal to document dot query selector dot result box because it is a class name then we will add the variable for the input box here I have added the const variable for the result box and input box this input box is the input field where we will type the input and this result box is the place where we will display the suggested keywords next we will create one's function and that will be executed when we will start typing anything in this input box so first we will add the JavaScript then I will explain you line by line here we are adding on key up it means when we will start typing anything in this input box then this function will be executed here it will create one array with the name result and this array is empty right now and this Adder will store all the filtered keyword that we have here here we have added this keywords in this array and we will filter these keywords according to the input that we will add in the input box and that filtered keyword will be stored in this result and here we are adding input so if this input will store the value available in this input box input box dot value then we will add here we are adding if input dot length it means input has some value then this length will be valid so if input has some value then it will store this filtered data in this result and this will filter the original array which is the available keywords so in this filter we will create one function that will check which keywords are similar to the input that we are writing in this input box for that here we'll add one addo function and here we will add one name let me add keyword this keyword will get each value one by one which is in this array and here we will add keyword dot includes input so this function will filter this array according to the input that we are adding in the input box user may enter the keyword in the input field in lowercase or uppercase so to compare that we will change everything in the lower case so here we will add Dot two lowercase and we will add the same thing here in this input first it will convert the input value in the lower case and it will convert the array data in lower case then it will check whether it includes the input keyword then it will return the filtered search term here we will add return this result will have all the filtered data when we will type anything in the input field to display this one let me add console DOT log and then result after that we will come back to the website and let's click here and inspect click on console and if I start typing anything in this search box we will add where you can see here we got the search term where to learn coding online where to learn web design let's type anything else we will add how so here we got one keyword related to how which is how to create a website so it is giving the filtered result next we have to display this result just below this search box and that will be displayed inside this result box for that we have to create another function that will display the result so let's create that one so here we have added this function display and in this display we are adding this result this result is an array that contains some Search keywords and we have to add one Li tag in all Search terms for that in that result we will add map this map will get each data from the array and then it will add the LI at the start and Li at the end and then it will return that returned value will be stored in this content now we can display this content on our web page we have to display this content within the UL tag which is the unordered list so here we have the result box let's copy this one here we will add result box Dot inner HTML then in this one first we will add UL within this UL we have to display this content let's copy this one and paste it here after adding this we have to call this function which is display when we will call it then it will be displayed on our webpage and when it will be displayed when we will start typing anything so for typing anything in the content we have this function so here we will add display result it will call this function now if you will start typing anything it will display this list in this UL tag in this result box let's come back and if I type anything you can see we got all the results here let's type where we got two result but here we are getting 1 comma if I write anything else you can see we have comma to remove these things let's come back this map gives a new array so we have to display this array as a string to display it as a string we will add join and if we write like this still we will get the comma so to replace this comma we will add this blank quotation mark so after adding this let's come back and if I start typing anything you can see it looks good if we click on any one it should be displayed inside the search box and this one will be hidden so again come back to display that one here we have to create one more thing in this Li we will create on click equal to select input then write this next we have to Define this select input let's copy this one and here at the end we will add function select input we will add list and in this function we will add input box dot value we have to display that list in the input field so here we will add list Dot inner HTML so when we will click here it will be displayed in the input field it is working if I click on JavaScript it is displaying in the input field if I click on this last one it is displaying in the input field so after displaying this in the input field we have to hide all these lists to hide that one let's come back and here we will add result box dot inner HTML and this inner HTML will be blank like this then it will be hidden let's come back and if I type something and click on any one you can see that is displaying in this search box and others search result are hidden next we have to add one more thing if I start typing like this and there is no suggested keyword here then still it is showing one horizontal line here to hide this one let's come back and in this one after calling this display we will add one more if condition if result Dot length here we are adding not result length it means there is no value in the result then we will add result box dot inner HTML equal to empty then that result box will be empty so there will be no horizontal line let's come back and if I write anything here and you can see that horizontal line is hidden you can see there is no horizontal line here and if I delete everything still it is looking good right now we have the limited Search terms here suppose you have lots of search term then this drop down will be very large for that we have to create one a scroll level box here to make that one let's come back and here we have the result box right let's add it here in the CSS file and for this result box we will add maximum height let's add 300 pixel then we will add the Overflow y Scroll after adding this let's come back to the website and if I type anything here we have the scroll level box here you can scroll like this if you have lots of search queries so finally we have completed this beautiful autocomplete search bar using HTML CSS and JavaScript if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel easy tutorials thank you so much for watching this video

Channel: GreatStack

Views: 82,122

Keywords: autocomplete search box, autocomplete search bar, search box autocomplete, search box suggestions, javascript, javascript projects, javascript projects for practice, javascript search bar, javascript for search bar, create search box in html css, create search box in javascript, web development, web development projects, learn javascript

Id: pdyFf1ugVfk

Length: 23min 56sec (1436 seconds)

Published: Fri Feb 03 2023