В ХТМЛ есть нативные выпадающие подсказки для полей ввода текста. Нативные — значит работающие во всех браузерах без дополнительного программирования.
Тег 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.