<datalist>

25 января 2023

Что делает тег

Тег <datalist> используется для создания списка опций для элемента ввода. Пользователь может выбрать опцию из списка вместо того, чтобы вводить её вручную.

Синтаксис тега <datalist>

<label for="input_element">Выберите опцию:</label>
<input list="options" id="input_element" name="input_name">>
<datalist id="options">>
  <option value="Вариант 1">
  <option value="Вариант 2">
  <option value="Вариант 3">
</datalist>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <datalist> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Простой список опций:

<label for="fruits">Выберите фрукт:</label>
<input list="fruit_options" id="fruits" name="fruit_name">>
<datalist id="fruit_options">>
  <option value="Яблоко">
  <option value="Банан">
  <option value="Апельсин">
</datalist>

Список опций с описанием:

<label for="countries">Выберите страну:</label>
<input list="country_options" id="countries" name="country_name">>
<datalist id="country_options">>
  <option value="GER">Германия</option>
  <option value="CHIN">Китай</option>
  <option value="MEX">Мексика</option>
</datalist>

Динамический список опций:

<label for="cities">Выберите город:</label>
<input list="city_options" id="cities" name="city_name">>
<datalist id="city_options">>
  <option value="Москва">
  <option value="Санкт-Петербург">
  <option value="Казань">
</datalist>

<button onclick="addCity()">Добавить город</button>

<script>
function addCity() {
  var cityInput = document.getElementById("cities");
  var newOption = document.createElement("option");
  newOption.value = "Новый город";
  cityInput.appendChild(newOption);
}
</script>

Для чего использовать тег <datalist>

Для фильтрации и предложения вариантов. Используйте <datalist> для предложения вариантов на основе пользовательского ввода и динамически обновляйте список по мере ввода пользователем.
Для автозаполнения поисковых запросов. Используйте тег для создания перечня предлагаемых поисковых запросов по мере того, как пользователь набирает текст в строке поиска.
Для перечня доступных опций. Используйте <datalist>, чтобы создать список доступных вариантов для ввода в форму.
Для списка ранее использованных входов. Используйте тег, чтобы показать список ранее использованных данных — например, недавно вводимых адресов электронной почты.
Для вывода подсказок при неполном вводе. Например, показывайте список логинов или адресов электронной почты на основе того, что пользователь уже набрал.
Для списка доступных категорий или тегов. Используйте <datalist>, чтобы сформировать список доступных категорий или тегов в блоге.

Атрибуты тега <datalist>

У тега нет специфических атрибутов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

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

Нюансы

Если пользователь вводит значение, которого нет в списке опций, оно всё равно будет принято и отправлено вместе с данными формы.
Если элемент ввода помечен как обязательный, пользователь не сможет отправить форму, если не выберет вариант из списка.
Если в списке вариантов одно и то же значение встречается несколько раз, каждое из них будет отображаться как отдельный вариант.

Поддержка браузерами

Тег поддерживается не всеми браузерами.
Актуальная информация — на сaniuse.

Альтернативные теги

Прямых альтернатив тегу <datalist> не существует, но схожая функциональность может быть достигнута с помощью JavaScript или сторонних библиотек, таких как jQuery UI или Select2.

Чем заменить тег

Если тег <datalist> не может быть использован или плохо поддерживается, можно попробовать другие варианты.

Использовать <select> со списком опций.
Использовать обычный текстовый ввод и реализовать функции фильтрации и предложения с помощью JavaScript.
Использовать сторонние библиотеки или фреймворки, предоставляющего аналогичную функциональность, например, jQuery UI или Select2.