Элемент <datalist>

Элемент <datalist> (от англ. data list — список данных) создаёт список предопределённых вариантов для элемента <input>, которые могут быть предложены пользователю при вводе данных в текстовом поле. Изначально этот список скрыт и появляется только при получении полем фокуса или при наборе текста.

Каждый вариант списка определяется дочерним элементом <option>:

<datalist>
  <option value="Яблоко">
  <option value="Апельсин">
</datalist>

Для установления связи между элементом <datalist> и элементом <input> необходимо, чтобы значение атрибута id в <datalist> совпадало со значением атрибута list в <input>:

<input list="fruits">
<datalist id="fruits"> ... </datalist>

Элемент <datalist> используется для предоставления функции «автодополнения». Автодополнение (или автозавершение) — это функция в программах, предусматривающих интерактивный ввод текста, которая предлагает варианты ввода завершающей части текста на основе ввода текущей части текста.

Элемент <datalist> позволяет улучшить пользовательский интерфейс, предоставляя пользователю выбор из заранее заданного списка значений, что упрощает ввод данных и снижает вероятность ошибок.

Атрибуты

Для элемента <datalist> доступны глобальные атрибуты и события.

Стиль по умолчанию

Стиль по умолчанию для элемента <datalist>, определённый в спецификации HTML:

datalist { display: none; }

Пример

<label>Ваш любимый фрукт:
  <input list="fruits">
  <datalist id="fruits">
    <option value="Яблоко">
    <option value="Апельсин">
    <option value="Банан">
    <option value="Груша">
    <option value="Киви">
  </datalist>
</label>