Автодоповнення списків використовується в користувацьких інтерфейсах давно. Проте в більшості випадків для цього застосовуються кастомні, доволі складні компоненти. Але в HTML5 існує нативний елемент, який забезпечує такий функціонал без JavaScript, виключно засобами HTML.
Мова йде про
datalist. Це надзвичайно простий елемент, який водночас забезпечує саме те, що від нього очікується — виведення списку підказок при введенні тексту у поле введення.Виглядає це так:
<label for="city">Місто</label>
<input list="cities" name="city" id="city"/>
<datalist id="cities">
<option value="Київ" />
<option value="Львів" />
<option value="Харків" />
<option value="Одеса" />
</datalist>
На відміну від
select, datalist не обмежує вибір, а лише підказує наявні співпадіння. Користувач же може ввести довільне значення у поле вводу. На валідацію datalist теж не впливає.При виборі елемента списку в інпут буде підставлено значення з атрибуту
value і викликано стандартні події поля вводу, тому немає технічної можливості дізнатися, як саме значення було введено.Одним з очевидних недоліків використання
datalist є його закрита інтеграція в бравзер: ми не можемо впливати ані на його поведінку, ані на зовнішній вигляд списку підказок, коли він показується. Хоча, дивлячись на те, як цього року реалізували стилізацію нативних селектів, я маю обережний оптимізм і щодо datalist.Перевага ж очевидна — це швидке, нативне рішення, яке не потребує підключення стороннього коду для відображення підказок, і якщо ваша форма не є складною, і для вас головне, щоб вона була максимально простою та ефективною в імплементації —
datalist є беззаперечним вибором.Щодо відмінності поведінки в бравзерах, тут, звичайно, доведеться прийняти стан справ як є.
Наприклад, Chromium та Webkit бравзери зараз покажуть і значення з атрибуту
value, і текст між тегами option у випадайці. А от Firefox покаже лише підпис. Взагалі, саме у Firefox datalist має доволі обмежену імплементацію. До прикладу, логіка пошуку по списку суттєво відрізняється, якщо у option є і атрибут value і текст.Тому треба враховувати, який саме досвід ви хочете надати користувачу: якщо це усі можливі свистілки і перділки, то доведеться тягнути якесь стороннє рішення на купі дівів. Якщо ж мета просто показати список підказок, то
datalist задовольняє цю потребу майже на 100%.Ну або вішайте табличку "Найкраще працює в Chrome/Edge", ми це вже проходили.
Що почитати:
MDN: <datalist>
Що почитати душнілам:
HTML Living Standard — <datalist>
@babichdev
P.S. Якщо не поставите вогник чи серденько — я дуже засмучусь. Ви ж не хочете, аби я засмутивсь? Правда? ПРАВДА?