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

1. Make sure you have the highlight_attributes in the search_settings configuration.
2. Make sure the attributes are also specified in the search_attributes too, and match the same field.