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

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

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

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

Cube
The cube can be represented in many ways. One example is by drawing a graph, a structure in graph theory consisting of a set of vertices that are connected with an edge. This graph also represents the family of a cuboid, a polyhedron with six quadrilateral faces, which includes the cube as its special case. The cube and its graph are a three dimensional hypercube, a family of polytopes that also includes the two-dimensional square and four-dimensional tesseract.

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

Cube
https://en.wikipedia.org/wiki/Cube

A cube is a three-dimensional solid object in geometry. A cube has eight vertices and twelve straight edges of the same length, so that these edges form six faces.

Cube (1997 film)
https://en.wikipedia.org/wiki/Cube_(1997_film)

Cube is a 1997 Canadian science fiction horror film directed and co-written by Vincenzo Natali. A product of the Canadian Film Centre's First Feature Project.

Cube (algebra)
https://en.wikipedia.org/wiki/Cube_(algebra)

In arithmetic and algebra, the cube of a number n is its third power, that is, the result of multiplying three instances of n together.

Cube (2021 film)
https://en.wikipedia.org/wiki/Cube_(2021_film)

The story centers on a group of strangers who awaken in a cube-shaped room connected to adjacent rooms, forming an elaborate maze filled with traps.

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

CityCompanyPersonNotes
ManchesterBlue Harbor LtdAlice BrownAnnual review completed
LiverpoolMancraft StudioDaniel ReedNew client onboarded
BristolGreenField TechMancini RobertBudget approved
LeedsNorthwind LabsEmma StoneVisit planned for Manchester office
YorkDelta SystemsMichael TurnerContract with Mancorp signed
OxfordSilver BridgeLaura GreenArchived in mancategory B

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

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

Раньше этот пайп назывался mcHighlight: это имя устарело и будет удалено в 22.0.0.

Предложения по улучшению
Если вы нашли ошибку или хотите доработать статью, создайте запрос на GitHub.