Highlight

Signature

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

Displays the highlighted attributes of your search results. It isn’t a widget but a component available from the hits or infiniteHits widgets templates.

Examples

JavaScript

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

Options

attribute

string

required

The highlighted attribute.Specify a dot-separated value for nested objects, like actor.name

JavaScript

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

hit

object

required

The original hit object provided to the function. It contains all the data for that result, including the highlighted parts.

The hit object must contain a _highlightResult[attribute].value property.

JavaScript

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

highlightedTagName

string

default:"mark"

The HTML element that wraps the highlight.

JavaScript

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

nonHighlightedTagName

string

default:"span"

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

JavaScript

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

separator

string

default:", "

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

JavaScript

components.Highlight({
  // ...
  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.Highlight({
  // ...
  cssClasses: {
    root: "MyCustomHighlight",
    highlighted: ["MyCustomHighlightPart", "MyCustomHighlightPart--subclass"],
  },
});

HTML output

HTML

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

InstantSearch.js

About this widget

Examples

Options

HTML output

​About this widget

​Examples

​Options

​HTML output

About this widget

Examples

Options

HTML output