How to add autocomplete to an input field in JavaScript

Key takeaways:

• Implementing an autocomplete feature in JavaScript involves creating an input event listener, filtering data based on user input, and dynamically displaying matching suggestions.

• Adding clickable suggestions allows users to select a suggestion to fill the input field automatically, further enhancing usability and efficiency.

• Autocomplete suggestions update dynamically based on user input, showing matches from a predefined list that update in real-time.

• Adding autocomplete functionality to input fields can improve the user experience by suggesting relevant options as users type, helping them complete their input faster and with fewer errors.

Autocomplete is a useful feature that can enhance the user experience by suggesting possible input matches as the user types, helping them find information faster and reducing errors. In this Answer, we’ll learn how to implement autocomplete for an input field using JavaScript.

What is autocomplete?

Autocomplete on an input field refers to the functionality where the system suggests possible words or phrases based on the text the user enters. This feature is commonly seen in search bars, registration forms, input fields, etc., to make input faster and more user-friendly. Users can quickly select what they are looking for and save on their keystrokes.

How does autocomplete work?

When the user starts typing, autocomplete shows a list of suggestions based on available data. These suggestions update dynamically as the input changes. When the user clicks a suggestion, it fills the input field, saving them time.

Example

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.

In the above code:

• Line 5: We create an HTML 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.

In the above code:

• 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 the item they want.

In the above code:

• 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.

Knowledge test

Let’s attempt a short quiz to assess your understanding.

Conclusion

Adding an autocomplete feature to an input field is a practical way to improve the usability of forms and search bars on a web page. By using JavaScript to dynamically filter and display suggestions based on user input, we can make input fields more intuitive and efficient. Implementing this feature requires understanding event handling, DOM manipulation, and styling, making it a useful exercise for JavaScript learners and an essential tool for enhancing user experience on websites.