В поиске GitHub обычный текст соседствует с фильтрами
ключ:значение. Веб-компонент `<rich-input>` переносит этот шаблон на свой сайт: подсказывает названия фильтров и допустимые значения, подсвечивает структуру запроса и отмечает неверный ввод.Настройки задаются через вложенные
<datalist>. Компонент участвует в обычной отправке формы и работает с FormData, поэтому поле можно встроить в существующий интерфейс без привязки к конкретному фреймворку.В Chromium 152+ подсветка и расположение подсказок используют OpaqueRange внутри нативного input. Для других браузеров автор предусмотрел вариант с
contenteditable. Заявленная поддержка начинается с Chromium 105, Safari 17.2 и Firefox 140; ввод, выделение и отправку формы стоит проверить в целевых браузерах.