<datalist>

Автодополнение полей ввода без JavaScript.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

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

Как пишется

Секция статьи "Как пишется"
        
          
          <label for="my-browser">Выберите браузер из списка:</label><input list="browsers" id="my-browser" name="my-browser"><datalist id="browsers">  <option value="Chrome">  <option value="Firefox">  <option value="Yandex Browser">  <option value="Opera">  <option value="Safari">  <option value="Microsoft Edge"></datalist>
          <label for="my-browser">Выберите браузер из списка:</label>
<input list="browsers" id="my-browser" name="my-browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Yandex Browser">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

        
        
          
        
      
Открыть демо в новой вкладке