ais-highlight

Signature

<ais-highlight
  attribute="string"
  :hit="object"
  // Optional parameters
  highlighted-tag-name="string"
  :class-names="object"
/>

See code examples

See live example

About this widget

The ais-highlight widget renders any attribute from a hit into its highlighted form when relevant.

The component leverages the highlighting feature of Algolia and is designed to work with the ais-hits or ais-infinite-hits widget.

Examples

Basic usage

Copy
<ais-highlight attribute="name" :hit="hit" />

Access a nested property

Given this record:

Copy
{
  "objectID": 1,
  "meta": {
    "name": "my name"
  }
}

You can access the highlighted version by specifying the path separating levels with dots:

Copy
<ais-highlight attribute="meta.name" :hit="hit" />

Props


            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
<ais-highlight
  [...]
  attribute="name"
/>

hit

type: object

Required

The original hit object provided to the function. For this to work, the provided object must have a _highlightResult[attribute].value property.

Copy
<ais-highlight
  [...]
  :hit="hit"
/>


            highlighted-tag-name

type: string

default: "mark"

Optional

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

Copy
<ais-highlight
  [...]
  highlighted-tag-name="em"
/>


            class-names

type: object

default: {}

Optional

The CSS classes to override.

ais-Highlight: the root element of the widget.
ais-Highlight-highlighted: the highlighted part.

Copy
<ais-highlight
  [...]
  :class-names="{
    'ais-Highlight': 'MyCustomHighlight',
    'ais-Highlight-highlighted': 'MyCustomHighlightHighlighted',
  }"
/>

HTML output

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

Did you find this page helpful?