reverseHighlight

Signature

reverseHighlight({
  attribute: string,
  hit: object,
  // Optional parameters
  highlightedTagName: string,
});

Import

Copy

1
import { reverseHighlight } from 'instantsearch.js/es/helpers';

See code examples

About this widget

The reverseHighlight 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
hits({
  container: '#hits',
  templates: {
    item: `
      <h2>{{#helpers.reverseHighlight}}{ "attribute": "name" }{{/helpers.reverseHighlight}}</h2>
      <p>{{ description }}</p>
    `,
  },
});

1
2
3
4
5
6
7
8
9
10
11
hits({
  container: '#hits',
  templates: {
    item(hit) {
      return `
        <h2>${reverseHighlight({ attribute: 'name', hit })}</h2>
        <p>${hit.description}</p>
      `;
    },
  },
});

Options

Parameter Description


            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
reverseHighlight({
  // ...
  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
reverseHighlight({
  // ...
  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
reverseHighlight({
  // ...
  highlightedTagName: 'em',
});

HTML output

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

Did you find this page helpful?

reverseHighlight

About this widget

Examples

Options

HTML output

On this page