ais-highlight

Signature

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

Import

Copy

1
2
3
4
5
6
7
8
9
import { AisHighlight } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3

export default {
  components: {
    AisHighlight
  },
  // ...
};

1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.

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

Parameter Description


            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?