Signature
Import
- Component
- Plugin
To ensure optimal bundle sizes,
see Optimize build size.
Vue
About this widget
Displays the highlighted attributes of your search results. It isn’t a widget but a helper function that works with theais-hits
or ais-infinite-hits
widgets.
Examples
Basic usage
Vue
Access a nested property
Given this record:JSON
Vue
Props
The highlighted attribute.Specify a dot-separated value for nested objects, like
actor.name
.Vue
The original
hit
object
provided to the function.
It contains all the data for that result, including the highlighted parts.The
hit
object must have a _highlightResult[attribute].value
property.Vue
The HTML element that wraps the highlight.
Vue
To customize the appearance,
override the appropriate class in your widget theme.
ais-Highlight
. The root element of the widget.ais-Highlight-highlighted
. The highlighted part.
Vue
HTML output
HTML