How to create a JavaScript autocomplete or typeahead feature?
13/03/2024
•
5
min
Creating a JavaScript autocomplete or typeahead feature involves creating an HTML input field, then using JavaScript to listen for when the user types into that input field. When the user types, we provide them with suggestions of possible completions for their input.
In this example, we are going to create a JavaScript typeahead feature for a list of cities.
Here's a step-by-step guide on how you can do this:
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
Step 1: Define an HTML input field.
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete/Autosuggest feature</title>
</head>
<body>
<input id="inputField" type="text" placeholder="Start typing..." onkeyup="suggest(event)">
<div id="suggestion-box"></div>
<script src="autocomplete.js"></script>
</body>
</html>
In the html above, we have an input field with an id of inputField. This input field calls a suggest() function every time a key is pressed.
We also have suggestion-box, a div where the suggestions will be displayed.
Step 2: Let's now create the JavaScript that will create suggestions for the user.
Create a new file autocomplete.js and add the following code:
var cities = ["Paris", "London", "New York", "Los Angeles", "Tokyo", "Berlin"];
function suggest(e) {
var input = e.target.value;
document.getElementById("suggestion-box").innerHTML = "";
if(input.length>0){
for (var i = 0; i < cities.length; i++) {
if (cities[i].toLowerCase().startsWith(input.toLowerCase())) {
var node = document.createElement("DIV");
var textnode = document.createTextNode(cities[i]);
node.appendChild(textnode);
document.getElementById("suggestion-box").appendChild(node);
}
}
}
};
The var cities contains an array of city names.
The suggest() function is called whenever a keyup event happens in the input field. It takes the current input, and checks if it matches the start of any of the cities in the array.
If a match is found, it creates a new div (node), adds the matching city to that div, and then appends this div to the suggestion box. This way, the matching city is displayed as a suggestion under the input field.
Step 3: Style your suggestion box as desired with CSS.
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete/Autosuggest feature</title>
<style>
#suggestion-box {
display: block;
border: 1px solid #ccc;
padding: 10px;
margin-top: 5px;
}
#suggestion-box div {
padding: 10px;
border: 1px solid #aaa;
cursor: pointer;
}
#suggestion-box div:hover {
background-color: #aaa;
color: white;
}
</style>
</head>
<body>
<input id="inputField" type="text" placeholder="Start typing..." onkeyup="suggest(event)">
<div id="suggestion-box"></div>
<script src="autocomplete.js"></script>
</body>
</html>
This CSS gives a separate block for each suggestion, provides some padding and a border, and changes the background color in response to mouse hover to improve user experience. You can customize this CSS as per your requirements.
Note: The basic functionality of this autocomplete doesn't include selection of suggestion using mouse click or arrow keys. To achieve advanced functionalities like these, we would ideally use libraries like jQuery UI or Bootstrap which offer ready-made autocomplete widgets.
AI agent for developers
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.