Typeahead — это когда поле ввода показывает подсказки прямо во время набора текста. Например, в браузере или Apple Spotlight.

Есть два вида typeahead:

• Тусклый текст — дополнительный текст появляется бледным, как в терминалах или редакторах кода.
• Выделенный текст — дополнительный текст выделен и стилизован, как в Spotlight, где можно видеть действие типа «Открыть» или «Поиск».

Автор статьи изучал, как реализовать typeahead с выделенным текстом на вебе. Оказалось, что это не стандартная функция HTML. Нужно создавать наложение поверх поля ввода, чтобы показывать подсказки и скрывать курсор.

Основные особенности:

• Подсказка выглядит как выделенный текст, но курсор остается скрытым.
• Пользователь может продолжать печатать, не стирая подсказку.
• Нажатие backspace удаляет подсказку полностью, а не последний символ.

Автор пробовал разные подходы — используя реальный текстовый выбор, но это плохо работает на iOS. Поэтому выбрал наложение с точной синхронизацией стилей.

Для управления событиями использовались нестандартные события, например beforeInput. Это дало возможность точно контролировать ввод, удаление и отображение подсказок.

Интересно, что использование системных цветов выделения не всегда работает из-за ограничений браузеров и настроек пользователя. Пришлось выбирать кастомные цвета для подсветки.

Подробности и живую демо-версию можно посмотреть в оригинальной статье. Там много технических деталей и примеров кода.

Изучить подход и попробовать можно по ссылке: Design engineering 101: Typeahead. Это полезно для тех, кто хочет сделать удобный и быстрый поиск на сайте.

Этот приём помогает держать внимание пользователя в поле ввода и ускоряет выбор нужного варианта без лишних движений мышкой.