ReverseSnippet
components.ReverseSnippet({ attribute: string, hit: object, // Optional parameters highlightedTagName: string, nonHighlightedTagName: string, separator: string, cssClasses: object, });
About this widget
The reverseSnippet
function returns any attribute from a hit into its snippeted form, when relevant.
This function leverages the snippeting feature of Algolia and is designed to work with the hits
or infiniteHits
widget.
The attribute
must be set in attributesToSnippet
, either inside the Algolia dashboard or at runtime:
1
2
3
4
5
search.addWidgets([
configure({
attributesToSnippet: ['description'],
})
]);
Examples
1
2
3
4
5
6
7
8
9
10
11
hits({
container: '#hits',
templates: {
item(hit, { html, components }) {
return html`
<h2>${hit.name}</h2>
<p>${components.ReverseSnippet({ attribute: 'description', hit })}</p>
`;
},
},
});
Options
attribute
|
type: string
Required
The attribute of the record to snippet. You can give a dot-separated value for deeply nested objects, like |
||
Copy
|
|||
hit
|
type: object
Required
Original |
||
Copy
|
|||
highlightedTagName
|
type: string
default: mark
Optional
The name of the HTML element to wrap the snippeted parts of the string. |
||
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-Snippet-highlighted">highlighted text</mark></span>