Highlight
components.Highlight({ attribute: string, hit: object, // Optional parameters highlightedTagName: string, nonHighlightedTagName: string, separator: string, cssClasses: object, });
About this widget
Displays the highlighted attributes of your search results.
It isn’t a widget but a component available from the hits
or infiniteHits
widgets templates.
Examples
1
2
3
4
5
6
7
8
9
10
11
hits({
container: '#hits',
templates: {
item(hit, { html, components }) {
return html`
<h2>${components.Highlight({ attribute: 'name', hit })}</h2>
<p>${hit.description}</p>
`;
},
},
});
Options
attribute
|
type: string
Required
The highlighted attribute. Specify a dot-separated value for nested objects, like |
||
Copy
|
|||
hit
|
type: object
Required
The original The |
||
Copy
|
|||
highlightedTagName
|
type: string
default: "mark"
Optional
The HTML element that wraps the highlight. |
||
Copy
|
|||
nonHighlightedTagName
|
type: string
default: "span"
Optional
The HTML element that wraps the non-highlighted parts of the string. |
||
Copy
|
|||
separator
|
type: string
default: ", "
Optional
The character between each item when the attribute to highlight is an array. |
||
Copy
|
|||
cssClasses
|
type: object
default: {}
Optional
The CSS classes you can override:
|
||
Copy
|
HTML output
1
<span>This is the <mark class="ais-Highlight-highlighted">highlighted text</mark></span>