How to create a form input autocomplete without a library or framework
For today’s article, I was going to show you how to recreate Angular’s autocomplete demo with vanilla JS as part of my series on coding framework demos in vanilla JS.
However, in preparing for the article, I discovered that you actually don’t need JavaScript at all!
Introducing datalist
Turns out, native HTML5 provides elements we can use to get autocomplete without a library or framework… or any JavaScript at all.
The magic that makes this all happen is the datalist
element.
Let’s say you wanted to create an input where you name your favorite state. First, create your input.
<label for="states">What's your favorite state?</label>
<input type="text" id="states" name="states">
Then, give it a list
attribute. The value of this list attribute can be anything that would be a valid ID.
<label for="states">What's your favorite state?</label>
<input type="text" id="states" name="states" list="states-list">
Finally, we add a datalist
element. This element should have an id
that matches the value of the input
element’s list
attribute.
Within it, you’ll include a set of option
elements with the values the user can autocomplete from.
<datalist id="states-list">
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
...
</datalist>
Browser Compatibility
This approach works in Chrome, Firefox, and IE11 and up. It does not work in Safari.
In Chrome, IE, and Edge, when the user focuses on the input
, a menu of options appears that they can select from. This doesn’t happen in Firefox, for some reason. Options for that browser only appear as the user types.