← #32 Create a descending list of numbered items
#33

Create an autocomplete list with the datalist element

Topics: HTML

The HTML 5 datalist element comes in handly when you want to create an autocomplete input from a pre-defined list.

The element generates a dropdown that allow user to choose its options. In comparison to the normal select element, the datalist element provide the ability of filter the options.

Users also can enter what they want in the same way the normal text box does.

<input list="demo__list">
<datalist id="demo__list">
<option value="..." />
<option value="..." />
<option value="..." />
...
</datalist>

Demo

Choose your favorite color:

Fix a typo or suggest an improvement
#34 Show a placeholder for an empty list