by clemens (03.04.2023)

Using a text input with a list of predefined options

tl;dr

So today I learned that you can use a <input list="option-list"> in combination with a <datalist id="option-list"><option value="a"/></datalist> for the often required use case of a text input with a list of available options and you no longer need to implement that manually all the time.

Browser support seems really nice, and here is a full example:

<input type="text" name="something" list="something-list">
<datalist id="something-list">
    <option value="here"/>
    <option value="there"/>
    <option value="elsewhere"/>
</datalist>