UI libraries / InstantSearch.js / Widgets

ReverseHighlight

Signature 
components.ReverseHighlight({
  attribute: string,
  hit: object,
  // Optional parameters
  highlightedTagName: string,
  nonHighlightedTagName: string,
  separator: string,
  cssClasses: object,
});
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.

Examples

Copy 
1
2
3
4
5
6
7
8
9
10
11

hits({
  container: '#hits',
  templates: {
    item(hit, { html, components }) {
      return html`
        <h2>${components.ReverseHighlight({ attribute: 'name', hit })}</h2>
        <p>${hit.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

components.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

components.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

components.ReverseHighlight({
  // ...
  highlightedTagName: 'em',
});
nonHighlightedTagName
type: string
default: "span"
Optional

The HTML element that wraps the non-highlighted parts of the string.
Copy 
1
2
3
4

components.ReverseHighlight({
  // ...
  nonHighlightedTagName: 'div',
});
separator
type: string
default: ", "
Optional

The character between each item when the attribute to highlight is an array.
Copy 
1
2
3
4

components.ReverseHighlight({
  // ...
  separator: ' - ',
});
cssClasses
type: object
default: {}
Optional

The CSS classes you can override:

  • root: the component’s root element.
  • highlighted: the highlighted parts.
  • nonHighlighted: the non-highlighted parts.
  • separator: the separator elements between highlighted parts.
Copy 
1
2
3
4
5
6
7
8
9
10

components.ReverseHighlight({
  // ...
  cssClasses: {
    root: 'MyCustomReverseHighlight',
    highlighted: [
      'MyCustomReverseHighlightPart',
      'MyCustomReverseHighlightPart--subclass',
    ],
  },
});

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 v4