Table of Contents

About

A datalist 1) is a html element that implements a combobox.

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.

Rendered by WebCode

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"  />
Rendered by WebCode

Features

Behavior:

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.
1)
en-US/docs/Web/HTML/Element/datalist