HTML Academy · Урок

Datalist для автодополнения

Предлагайте значения для ввода с помощью элемента datalist

«Datalist для автодополнения» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Что такое список предложений

Элемент <datalist> предоставляет список предопределённых предложений для поля <input>:

<label for="browser">Favorite browser</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>
<!-- list attribute links input to datalist by id -->
<!-- User can type freely OR select a suggestion -->

Список предложений и select

Основное различие между <datalist> и <select>:

Список предложений — свободный текст и предложения (пользователь может ввести что угодно)
select — ограниченный выбор (пользователь должен выбрать вариант из списка)

Используйте список предложений, когда хотите предлагать значения, но не ограничивать ввод.

Связывание списка предложений с полем ввода

Атрибут list у <input> должен совпадать со значением id элемента <datalist>:

<input type="text" list="fruits" name="fruit">
<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
</datalist>

Список предложений с разными типами ввода

<datalist> работает со многими типами полей ввода:

<!-- text + datalist: type-ahead suggestions -->
<input type="text" list="countries">

<!-- range + datalist: tick marks -->
<input type="range" min="0" max="100" step="10" list="marks">
<datalist id="marks">
  <option value="0">  <option value="25">
  <option value="50"> <option value="75"> <option value="100">
</datalist>

<!-- color + datalist: color palette shortcuts -->
<input type="color" list="brand-colors">
<datalist id="brand-colors">
  <option value="#0070f3">
  <option value="#e86f00">
</datalist>

Метка варианта в списке предложений

У вариантов в списке предложений могут быть отображаемая метка и отправляемое значение:

<datalist id="countries">
  <option value="US">United States</option>
  <option value="GB">United Kingdom</option>
  <option value="DE">Germany</option>
</datalist>
<!-- In some browsers, label shows in dropdown
     value is submitted when the option is selected -->

Фильтрация предложений

Браузер фильтрует предложения по мере ввода пользователя:

Алгоритм сопоставления зависит от браузера
Некоторые браузеры ищут совпадение с начала строки, другие — в любом её месте
Невозможно управлять поведением фильтрации браузера
Для пользовательской фильтрации создайте собственный компонент автодополнения с ARIA

Динамический список предложений с JavaScript

Динамически обновляйте варианты списка предложений:

<input type="text" list="suggestions" id="search-input">
<datalist id="suggestions"></datalist>

<script>
document.getElementById('search-input').addEventListener('input', async function() {
  const query = this.value;
  const res = await fetch(`/api/search?q=${query}`);
  const items = await res.json();

  const dl = document.getElementById('suggestions');
  dl.innerHTML = items.map(item =>
    `<option value="${item.name}">`
  ).join('');
});
</script>

Доступность списка предложений

Рекомендации по доступности списка предложений:

Программы чтения с экрана объявляют предложения как список вариантов
Пользователи могут перемещаться по предложениям с помощью клавиш со стрелками
Поле ввода по-прежнему принимает свободный текст — убедитесь, что проверка учитывает это

Примечания о поддержке браузерами

Поддержка списка предложений браузерами хорошая, но есть особенности:

Chrome, Edge, Firefox: полная поддержка
Safari: поддерживается начиная с Safari 12.1+
Мобильные браузеры: большинство показывает предложения, но интерфейс различается
Всегда тестируйте в целевых браузерах, прежде чем полагаться на список предложений

Когда не следует использовать список предложений

Список предложений не подходит, если:

Вам нужна строгая проверка (пользователь должен выбрать вариант из списка)
Вам нужна пользовательская стилизация вариантов (браузер полностью управляет внешним видом)
Вам нужна группировка (группировка вариантов не поддерживается)

В таких случаях используйте пользовательский компонент автодополнения с ARIA и role="combobox".

Список предложений и поле поиска

Сравните список предложений и поле поиска с автодополнением:

<input type="search" name="q" list="search-suggestions">
<datalist id="search-suggestions">
  <option value="HTML tutorial">
  <option value="HTML forms">
  <option value="HTML accessibility">
</datalist>
<!-- type="search" provides search-specific UI on mobile -->
<!-- list attribute adds datalist suggestions to any input type -->

Быстрая проверка

Как связать поле ввода с соответствующим элементом списка предложений?

Повторение: список предложений

Основные сведения о списках предложений:

<datalist id> + <input list> — связываются с помощью совпадающих значений id и list
Пользователь может свободно вводить текст или выбирать предложение
Используйте <select>, когда выбор должен быть ограничен
Работает с текстом, диапазонами, цветом и другими типами полей ввода
Предложения фильтруются по мере ввода пользователя

Часто задаваемые вопросы

Урок «Datalist для автодополнения» бесплатный?

Да — полный текст урока «Datalist для автодополнения» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Datalist для автодополнения»?

Предлагайте значения для ввода с помощью элемента datalist Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Datalist для автодополнения»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy