Нативний HTML5 autocomplete з input list

Ця стаття показує, як за допомоги HTML5 input list атрибута і datalist елемента з легкістю налаштувати поле вводу з автозаповненням без JavaScript.

Як це працює

Додайте list атрибут до списку, а потім створіть datalist елемент. Значення list повинне бути таким же, як і dataList id селектор.

<datalist id="city">
<option>Київ</option>
<option>Херсон</option>
<option>Львів</option>
<option>Запоріжжя</option>
<option>Чернігів</option>
<option>Миколаїв</option>
<option>Ужгород</option>
<option>Івано-Франківськ</option>
<option>Дніпропетровськ</option>
<option>Житомир</option>
</datalist>

Браузерна підтримка

Елемент dataListі input list підтримується в Chrome 31+, IE10 +, Firefox 34+ і Opera 26+. Поки ще немає підтримки в Safari, але поля введення зі списком атрибутів працюють стандартно, а dataList ігнорується.