В ХТМЛ есть нативные выпадающие подсказки для полей ввода текста. Нативные — значит работающие во всех браузерах без дополнительного программирования.

Тег datalist с подсказками привязывается по своему уникальному айди к полю ввода через атрибут list. Теперь при вводе появятся с подсказками, причём по мере ввода останутся только подходящие по тексту. На Айфоне подсказки появятся над виртуальной клавиатурой.

<input type="search" 
  placeholder="Поиск по исполнителю" 
  list="popular-artists">
      
<datalist id="popular-artists">
    <option value="Pink Floyd"></option>
    <option value="Queen"></option>
    <option value="Deep Purple"></option>
    <option value="Uriah Heep"></option>
    <option value="ABBA"></option>
    <option value="Beatles"></option>
    <option value="Metallica"></option>
    <option value="Megadeth"></option>
</datalist>

У подсказок и в целом у подобных нативных элементов своя специфика. Их дизайн зависит от браузера и редко блещет красотой, стилизовать их ЦССом нельзя. Зато всё работает сразу «из коробки» и не требует программирования.

Нативные элементы хорошо подходят для быстрой вёрстки прототипов или служебного интерфейса, где нет строгих требований к дизайну. А вот для публичного интерфейса, скорее всего, придётся программировать нужные элементы вручную или подключать чужие готовые решения.

P. S. Внезапно! Даталист работает с выбиралкой цвета, добавляя в неё цвета‑подсказки. Поддерживается только хекс‑формат.

<input type="color" list="colors">
      
<datalist id="colors">
    <option value="#0550ff"></option>
    <option value="#8fd6f5"></option>
    <option value="#e30016"></option>
</datalist>
Да, в ХТМЛ есть нативная выбиралка цвета!

P. P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы