Skip to main content
Signature
components.ReverseSnippet({
  attribute: string,
  hit: object,
  // Optional parameters
  highlightedTagName?: string,
  nonHighlightedTagName?: string,
  separator?: string,
  cssClasses?: object,
});

About this widget

The reverseSnippet function returns any attribute from a hit into its snippeted form, when relevant. This function leverages the snippeting feature of Algolia and is designed to work with the hits or infiniteHits widget. The attribute must be set in attributesToSnippet, either inside the Algolia dashboard or at runtime:
JavaScript
search.addWidgets([
  configure({
    attributesToSnippet: ["description"],
  }),
]);

Examples

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

Options

attribute
string
required
The attribute of the record to snippet. You can give a dot-separated value for deeply nested objects, like description.full.
JavaScript
components.ReverseSnippet({
  // ...
  attribute: "description.full",
});
hit
object
required
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 _snippetResult[attribute].value property.
JavaScript
components.ReverseSnippet({
  // ...
  hit: item,
});
highlightedTagName
string
default:"mark"
The name of the HTML element to wrap the snippeted parts of the string.
JavaScript
components.ReverseSnippet({
  // ...
  highlightedTagName: "em",
});
nonHighlightedTagName
string
default:"span"
The HTML element that wraps the non-highlighted parts of the string.
JavaScript
components.ReverseSnippet({
  // ...
  nonHighlightedTagName: "div",
});
separator
string
default:", "
The character between each item when the attribute to highlight is an array.
JavaScript
components.ReverseSnippet({
  // ...
  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.ReverseSnippet({
  // ...
  cssClasses: {
    root: "MyCustomReverseSnippet",
    highlighted: [
      "MyCustomReverseSnippetPart",
      "MyCustomReverseSnippetPart--subclass",
    ],
  },
});

HTML output

HTML
<span>This is the <mark class="ais-Snippet-highlighted">highlighted text</mark></span>
I