API Reference / InstantSearch.js Widgets / highlight
Apr. 24, 2019

highlight

Widget signature 
instantsearch.highlight({
  attribute: string,
  hit: object,
  // Optional parameters
  highlightedTagName: string,
});
See code examples

About this widget

The highlight function returns any attribute from a hit into its highlighted form, when relevant.

The function leverages the highlighting feature of Algolia and is designed to work with the hits or infiniteHits widget. This helper is available in both forms: as a string and as a function.

Examples

Copy 
1
2
3
4
5
6
7
8
9

instantsearch.widgets.hits({
  container: '#hits',
  templates: {
    item: `
      <h2>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</h2>
      <p>{{ description }}</p>
    `,
  },
});

Options

attribute
type: string
Required

The attribute of the record to highlight. You can give a dot-separated value for deeply nested objects, like actor.name.
Copy 
1
2
3
4

instantsearch.highlight({
  // ...
  attribute: 'actor.name',
});
hit
type: object
Required

The original hit object provided to the function. Note that the value is already bound to the function inside a string template, so you don’t have to provide it. For this to work, the provided object must have a _highlightResult[attribute].value property.
Copy 
1
2
3
4

instantsearch.highlight({
  // ...
  hit: item,
});
highlightedTagName
type: string
default: mark
Optional

The name of the HTML element to wrap the highlighted parts of the string.
Copy 
1
2
3
4

instantsearch.highlight({
  // ...
  highlightedTagName: 'em',
});

HTML output

Copy
1

<span>This is the <mark class="ais-Highlight-highlighted">highlighted text</mark></span>

Did you find this page helpful?

InstantSearch.js v3