There are many ways you can build a searchbar. You can create complex searchbars that return results based on multiple filters, such as a name or date. Existing libraries can help you implement a searchbar without building it from scratch.
However, you can also create a simple searchbar using vanilla JavaScript, that compares a user’s input against a list of strings.
How to Add the UI for the Searchbar
Your website should include an input box for your users to enter the text that they want to search for. One way to do this is to use an input tag, and style it to look like a searchbar.
Create a folder to store your website. Inside the folder, create an HTML file named index. html. Populate your file with the basic structure of an HTML document. If you are not familiar with HTML, there are many HTML code examples you can learn to help you get up to speed. <!doctype html>
Search Countries
How to Create the List Strings for the Searchbar
Before the user can search, you will need to create a list of available items that they can search for. You can do this with an array of strings. A string is one of the many data types you can use in JavaScript, and can represent a sequence of characters.
You can dynamically create this list using JavaScript, as the page is loading.
Inside index. html, underneath the input tag, add a div. This div will display a dropdown that will contain a list of items that match what the user is searching for:
In the same folder as your index. html file and styles. css file, create a new file called script. js. Inside script. js, create a new function called loadSearchData(). Inside the function, initialize an array with a list of strings. Keep in mind that this is a small static list. A more complex implementation will have to take into account searching through larger datasets. function loadSearchData() { // Data to be used in the searchbar let countries = [ ‘Australia’, ‘Austria’, ‘Brazil’, ‘Canada’, ‘Denmark’, ‘Egypt’, ‘France’, ‘Germany’, ‘USA’, ‘Vietnam’ ];} Inside loadSearchData() and underneath the new array, get the div element that will display the matching search items to the user. Inside the list div, add an anchor tag for each data item in the list: // Get the HTML element of the listlet list = document. getElementById(’list’);// Add each data item as an tagcountries. forEach((country)=>{ let a = document. createElement(“a”); a. innerText = country; a. classList. add(“listItem”); list. appendChild(a);}) In the body tag of index. html, add the onload event attribute to call the new loadSearchData() function. This will load the data as the page is loading.In index. html, before the body tag ends, add a script tag to link to your JavaScript file: In styles. css, add some styling to the dropdown list: #list { border: 1px solid lightgrey; border-radius: 5px; display: block;}. listItem { display: flex; flex-direction: column; text-decoration: none; padding: 5px 20px; color: black;}. listItem:hover { background-color: lightgrey;} Open index. html in a web browser to view your searchbar and the list of available search results. The search functionality does not work yet, but you should see the UI that it will use:How to Create the Dropdown With Matching Results Within the Searchbar
Now that you have a searchbar and a list of strings for users to search, you can add the search functionality. As the user types into the searchbar, only certain items in the list will display.
In styles. css, replace the styling for the list to hide the list by default: #list { border: 1px solid lightgrey; border-radius: 5px; display: none;} In script. js, create a new function called search(). Keep in mind that the program will call this function every time the user enters or removes a character from the searchbar. Some applications will need trips to a server to fetch information. In such cases, this implementation could slow down your UI. You may need to modify the implementation to take this into account. function search() { // search functionality goes here} Inside the search() function, get the HTML div element for the list. Also get the HTML anchor tag elements of each item inside the list: let listContainer = document. getElementById(’list’);let listItems = document. getElementsByClassName(’listItem’); Get the input that the user entered into the searchbar: let input = document. getElementById(‘searchbar’). valueinput = input. toLowerCase(); Compare the user’s input to each item in the list. For example, if the user enters “a”, the function will compare if “a” is inside “Australia”, then “Austria”, “Brazil”, “Canada”, and so on. If it matches, it will display that item in the list. If it does not match, it will hide that item. let noResults = true;for (i = 0; i < listItems. length; i++) { if (!listItems[i]. innerHTML. toLowerCase(). includes(input) || input === “”) { listItems[i]. style. display=“none”; continue; } else { listItems[i]. style. display=“flex”; noResults = false; }} If there are no results at all in the list, hide the list completely: listContainer. style. display = noResults ? “none” : “block”; Click on the index. html file to open it in a web browser. Start typing into the searchbar. As you type, the list of results will update to only display matching results.
Using a Searchbar to Search for Matching Results
Now that you know how to create a searchbar with string selection, you can add more functionality.
For instance, you can add links to your anchor tags to open different pages depending on the result the user clicks. You can change your searchbar to search through more complex objects. You can also modify the code to work with frameworks like React.
