Автозаповнення інпутів в HTML

Вивчаємо HTML-тег datalist для створення списку підказок під час введення тексту в input.

Автозаповнення інпутів в HTML

Тег datalist дозволяє створити список готових варіантів для input. Користувач вводить текст, а браузер показує відповідні підказки.

datalist створює список підказок для input.
Елемент input повинен мати атрибут list.
Атрибут list повинен збігатися з id елемента datalist.
Користувач може вибрати готовий варіант або ввести свій текст.

Приклад списку країн

<label>
  Країна:
</label>

<input list="countries">

<datalist id="countries">
  <option value="Україна">
  <option value="Польща">
  <option value="Німеччина">
  <option value="Франція">
  <option value="Італія">
</datalist>

Як працює зв'язок input і datalist

<input list="cities">

<datalist id="cities">
  <option value="Київ">
  <option value="Львів">
  <option value="Одеса">
</datalist>

list="cities" шукає datalist з id="cities".
option задає один варіант у списку.
value містить текст, який буде запропонований користувачу.

❗ Важливо:

datalist працює без JavaScript і є зручним способом додати підказки для пошуку, вибору міст, країн або інших значень.

Практичне завдання

📌 Завдання:

№1. Створіть input для введення країни.
№2. Додайте datalist зі списком країн.
№3. Перевірте, як змінюється список під час введення символів.

<!-- Початковий код -->

<label>
  Країна:
</label>

<input>

💡 Показати підказку

Використайте атрибут list у input та створіть datalist з таким самим id.

✅ Показати відповідь

<label>
  Країна:
</label>

<input list="countries">

<datalist id="countries">
  <option value="Україна">
  <option value="Польща">
  <option value="Канада">
  <option value="США">
  <option value="Японія">
</datalist>