Snippet
Snippet is a widget that displays highlighted attributes from a hit. It is commonly used to display snippets of an attribute where the search query has matched.
Differences between highlighting and snippets
Highlighting and snippets are very similar. The main difference is that highlighting is returns the whole field value, highlighting the matches while snippets returns a part of the field value, highlighting the matches.
Highlighting would be useful for short value fields like title.
Snippets would be useful for long value fields like description.
Setup
The following document indexed in Elasticsearch:
{
"brand": "Apple",
"product": "Macbook Pro 14",
"in_stock": true,
"shipping": 10
}
Searchkit Setup
Within highlight_attributes
in search_settings
:
{
search_settings: {
snippet_attributes: ['description']
}
}
Changing length of snippet
The default length of the snippet is 100 characters. You can change this like so:
{
search_settings: {
snippet_attributes: ['description:200'] // snippet length will be 200 characters
}
}
Usage
Below is an example of a hitView
that displays the product
attribute with the search query highlighted.
const hitView = ({ hit }) => {
return (
<div>
<h2><Snippet hit={hit} attribute="description" /></h2>
</div>
)
}
Documentation
- JS Widgets (opens in a new tab)
- React InstantSearch (opens in a new tab)
- Vue InstantSearch (opens in a new tab)
- Angular InstantSearch (opens in a new tab)
Troubleshooting
- Make sure you have the
highlight_attributes
in thesearch_settings
configuration. - Make sure the attributes are also specified in the
search_attributes
too, and match the same field.