ReverseHighlight

Visually highlights the non-matching parts in search results.

Signature

components.ReverseHighlight({
  attribute: string,
  hit: object,
  // Optional parameters
  highlightedTagName?: string,
  nonHighlightedTagName?: string,
  separator?: string,
  cssClasses?: object,
});

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

JavaScript

hits({
  container: "#hits",
  templates: {
    item(hit, { html, components }) {
      return html`
        <h2>${components.ReverseHighlight({ attribute: "name", hit })}</h2>
        <p>${hit.description}</p>
      `;
    },
  },
});

Options

attribute · string · required

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

JavaScript

components.ReverseHighlight({
  // ...
  attribute: "actor.name",
});

hit · object · required

The original hit object provided to the function. 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.

JavaScript

components.ReverseHighlight({
  // ...
  hit: item,
});

highlightedTagName · string · default: "mark"

The name of the HTML element to wrap the highlighted parts of the string.

JavaScript

components.ReverseHighlight({
  // ...
  highlightedTagName: "em",
});

nonHighlightedTagName · string · default: "span"

The HTML element that wraps the non-highlighted parts of the string.

JavaScript

components.ReverseHighlight({
  // ...
  nonHighlightedTagName: "div",
});

separator · string · default: ""

The character between each item when the attribute to highlight is an array.

JavaScript

components.ReverseHighlight({
  // ...
  separator: " - ",
});

cssClasses · object · default: "{}"

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.

JavaScript

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

HTML output

HTML

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