My new favorite HTML feature is one I discovered by accident while reading about accent-color. The demo included a text input with an autocomplete dropdown — similar to what I would have used libraries like Select2 or Chosen for in the past.

Turns out this is nothing new and is supported all the way back to Internet Explorer 10. The list attribute on an input element allows you to specify a datalist of suggested options. Implementation varies from browser to browser: Firefox initially presented me with a text input that only revealed options once I started typing, while Safari’s implementation looked like a dropdown select. Regardless, in the browsers I tested, the list filtered as I typed, even if I entered part of the word.

To create an input with suggested options, give the list attribute the ID of a datalist element:

<label for="list-input">My Input</label>
<input type="text" list="my-list" id="list-input">

<datalist id="my-list">
    <option value="First Option">
    <option value="Second Option">
    <option value="Third Option">
    <option value="Yet Another Option">
</datalist>

A few important difference between this and using a dropdown select with a library: The user is not limited to the options provided. They’re treated as suggestions, with the user still able to enter custom text.

That does limit where I might use this, but I expect you could write some custom validation to check if the option is in the datalist, if you really wanted to limit the user. Even still, I can think of plenty of applications where an input with a datalist set might be a good replacement for a dropdown select and/or a third-party library.