HTML - datalist

About

datalist is a html element that creates a set of value permitted (a domain) that may be used in a input element by grouping options.

Unfortunately, the list behavior is not specified and it filters by default leaving out the other values once a value was selected.

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"  />

Documentation / Reference


Powered by ComboStrap