Чи можна підказати користувачу, що вводити в
<input>, не тягнучи в проєкт монструозний автокомпліт? HTML має просту відповідь — <datalist>. Елемент, який надає можливість просто й без особливо додати підказки до інпуту без жодного JavaScript.<datalist> дозволяє задати перелік <option>, які представляють допустимі або рекомендовані варіанти для введення. На вигляд це просто текстове поле, але щойно користувач починає набирати якийсь текст, бравзер пропонує підказки на основі цього списку.Принцип роботи простий: у
<input> вказується атрибут list, значенням якого є id відповідного <datalist>. Сам <datalist> містить набір <option>, які і пропонуються як підказки:
<input type="text" list="browsers" placeholder="Оберіть бравзер">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
Підказки з
<datalist> не обмежують введення: користувач усе одно може вписати будь-який текст, навіть якщо його немає серед варіантів. При потребі введення можна обмежити через атрибут pattern або додаткову валідацію.👍, ✅, 🔔 === ❤️❤️❤️
Слід мати на увазі: вигляд списку підказок у
<datalist> не можна стилізувати через CSS — його повністю контролює бравзер. Стилізувати можна лише саме текстове поле <input>. Сам <datalist> є службовим невидимим елементом, і чіпати його через CSS взагалі не варто.Якщо спробувати, список підказок буде відображатись окремо від поля, хоча функціональність усе одно збережеться. Ну а як потрібен повний контроль над виглядом і поведінкою підказок — що ж, доведеться реалізувати власний автокомпліт через JavaScript.
<datalist> підтримується стабільно у всіх основних бравзерах вже понад 10 років і офіційно входить до Web Platform Baseline 2023. Це означає, що його можна використовувати без застережень, без перевірок підтримки і без дублювання через поліфіли.MDN
А ви як, використовували <datalist> у своїх формах, чи відразу тулите кастомні автокомпліти? Напишіть у коментарях — цікаво ж!
@babichdev