datalist — список опций в input

Тег <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> нет встроенных функций для фильтрации или сортировки опций.
• Тег плохо поддерживается в старых браузерах. Поэтому для пользователей, использующих старые браузеры, необходимо предусмотреть запасной вариант.

Нюансы

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

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

Если тег <details> не поддерживается в браузере пользователя, используйте JavaScript или CSS для создания собственного виджета с аналогичной функциональностью.