Тег <datalist>

Описание

Тег <datalist> создает список предопределенных вариантов для элемента <input>, предоставляя пользователю автодополнение при вводе. Варианты отображаются как выпадающий список.

Простое автодополнение:
<label for="browser">Выберите браузер:</label> <input list="browsers" id="browser"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> </datalist>
Автодополнение с группировкой:
<input list="food" placeholder="Выберите продукт"> <datalist id="food"> <optgroup label="Фрукты"> <option value="Яблоко"> <option value="Банан"> </optgroup> <optgroup label="Овощи"> <option value="Морковь"> <option value="Картофель"> </optgroup> </datalist>
Динамическое заполнение через JavaScript:
<input list="cities" id="city-input"> <datalist id="cities"></datalist> <script> const cities = ['Москва', 'Санкт-Петербург', 'Новосибирск']; const datalist = document.getElementById('cities'); cities.forEach(city => { const option = document.createElement('option'); option.value = city; datalist.appendChild(option); }); </script>

Ключевые особенности:

  • Связывается с <input> через атрибут list
  • Позволяет как выбирать из списка, так и вводить произвольное значение
  • Поддерживает группировку через <optgroup>
  • Может заполняться динамически через JavaScript
  • Не заменяет <select> (пользователь может ввести свое значение)

Советы по использованию:

  • Используйте для полей с предсказуемыми вариантами (города, страны)
  • Добавляйте наиболее популярные варианты первыми
  • Для больших списков (100+ элементов) используйте динамическую загрузку
  • Сочетайте с input типа search для лучшей семантики

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

Атрибуты

class Задает один или несколько классов CSS для стилизации элемента
data-* Используется для хранения пользовательских данных в элементах
dir Определяет направление текста: слева направо (ltr) или справа налево (rtl)
id Уникальный идентификатор элемента в документе
translate Указывает, должен ли переводиться текст внутри элемента

Поддержка браузерами
10.0 20.0 9.5 4.0 12.1