Highlight

Highlight is a widget that displays highlighted attributes from a hit. It is commonly used to display the search query within the results.

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: {
    highlight_attributes: ['product']
  }
}

Usage

Below is an example of a hitView that displays the product attribute with the search query highlighted.

 
const hitView = (props) => {
  return (
    <div>
      <h2><Highlight hit={props.hit} attribute="product" /></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.