About
A datalist 1) is a html element that implements a combobox.
- You define a set of value permitted (a domain) that may be used in a input element by grouping options.
- You get autocompletion for free.
Example
Text
with a input text element
- The HTML
<datalist id="theme-values">
<option value="Orange">
<option value="Red">
<option value="Green">
<option value="Yellow">
</datalist>
<label for="themes">Choose a theme:</label>
<input type="text" list="theme-values" id="themes" size=20 />
- Result:
Unfortunately, once a value was selected, you need to delete it to be able to select another one. If you have few values, you may want to use select.
Number
with a input number element
<datalist id="even-values">
<option value="2">
<option value="4">
<option value="6">
<option value="8">
</datalist>
<label for="numbers">Choose a value:</label>
<input type="number" list="even-values" id="numbers" />
Features
Behavior:
- It does not force a selection as the HTML select element does
Advantage:
- It introduces a autocomplete filtering on the value entered.
Disadvantage:
- Unfortunately, the list behavior is not specified and it filters by default leaving out the other values once a value is selected.