Building your own autocompleting search bar is easier than you think.
A searchbar is a popular UI element that many modern websites utilize. If you are building a site that contains any type of data, you may want your users to be able to search for specific items.
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.
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.
<!-- Webpage content goes here-->
- Inside the container class div, add an input tag. This will allow the user to type in the text that they would like to search for. Whenever they enter a new character, your website will call the search() function. You will create this function in later steps.
<input id="searchbar" autocomplete="off" onkeyup="search()" type="text"
name="search" placeholder="What are you looking for?">
The autocomplete attribute ensures a browser will not add its own dropdown based on previous search terms.
- In the same folder as your index.html file, create a new CSS file called styles.css.
- Populate the file with styling for the overall webpage and the searchbar:
font-family: "Arial", sans-serif;
padding: 100px 25%;
-webkit-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out;
- In index.html, add a link to your CSS file inside the head tag and underneath the title tag:
<link rel="stylesheet" href="styles.css">
- Open the index.html file in a web browser, and view the UI of your searchbar.
How to Create the List Strings for the Searchbar
- 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.
let countries = [
- 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:
let list = document.getElementById('list');
let a = document.createElement("a");
a.innerText = country;
- 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.
<!-- Your webpage content -->
- In styles.css, add some styling to the dropdown list:
border: 1px solid lightgrey;
padding: 5px 20px;
- 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:
border: 1px solid lightgrey;
- 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.
- 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').value
input = 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++) input === "")
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.