Выделение совпадений позволяет пользователю быстро понять, почему результат релевантен, и ускоряет навигацию по спискам. В зависимости от контекста применяется один из двух способов оформления.

Koobiq предоставляет два pipe для подсветки совпадений текста — kbqHighlightBackground и mcHighlight. Оба принимают строку и аргумент для поиска, оборачивая найденные совпадения в тег <mark> — с классом kbq-highlight-background для выделения цветом и kbq-highlight для жирного шрифта.

Применяется в селектах и других выпадающих списках с фильтрацией, а также для выделения совпадений в сложном контенте: описаниях, сообщениях и статьях. Сплошной фон остается читаемым в состояниях hover и active внутри оверлея и делает совпадения заметными даже в длинных текстах.

Совпадения в тексте:

Совпадения в результатах поиска со сложной версткой:

Совпадения в таблице:

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

<span [innerHTML]="item | mcHighlight: searchQuery"></span>