The magic that makes this all happen is the
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
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>
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.