How to add autocomplete to an input field in JavaScript

Autocomplete on an input field gives users suggestions while they type their responses. This feature lets users quickly select what they are looking for and save on their keystrokes.

In this Answer, we break down the steps to implement an autocomplete feature on an input field in JavaScript, given a list of suggestions. For this example, we consider an input field for the user's favorite fruit.

Step 1: Adding HTML

The first step is to create the input field we use. We must also create a container that encapsulates the input field and the list of suggestions.

• Line 5: We create a form with the autocomplete attribute set to off. This attribute tells the browser not to use its autocomplete logic, as we will define our own.
• Lines 7–9: We create a <div> tag. Inside <div></div>, we create the input field on which we want the autocomplete feature.

Step 2: Creating an autocomplete function

Right now, our input field isn't of much use. We must tell the browser which suggestions to give the user, and how to provide them with JavaScript.

Note: Inside the event listener function, this refers to the calling element.

• Line 1: We create a list of the autocomplete suggestions we want the page to show. In our case, it is a long list of fruits.
• Line 3: We define our autocomplete function. The function takes an input element and an array of suggestions.
• Line 5: We attach an event listener on the input element to fire whenever the user inputs something.
• Line 7: We close the suggestions list if it is open, then create a new list. We'll define this function shortly.
• Lines 10–11: We exit the function if the input element has nothing written in it. This check prevents the entire list from appearing when there is no input.
• Lines 14–16: We create a <div> to hold our autocomplete suggestions. We set its ID and append it to the element that contains the input field.
• Lines 19–26: We loop through the list and check if the input value is a substring of each list item. If it is a substring, we create a new <div> element for that item and append it to the suggestions element.
• Lines 30–35: We define the closeList() function. It retrieves the suggestions element and removes it if it exists.
• Line 36: Finally, we call the autocomplete function for our input field and the list of fruits.

Step 3: Making the suggestions clickable

So far, we only display the list of suggestions. The user still has to type it in. Let's add some code to allow users to click on the item they want.

• Line 25: We attach an event listener to the matching suggestion for a click event.
• Line 26: When the suggestion is clicked, we set the input element's value to the text shown by the suggestion.
• Line 27: After we set the input element's value, we want the list to close and no longer be visible.
• Line 29: We change the cursor when it hovers over the suggestion. This styling lets the user know the item is clickable.