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

Displays the highlighted attributes of your search results. It isn’t a widget but a helper function that works with the ais-hits or ais-infinite-hits widgets.

Examples

Basic usage

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

Access a nested property

Given this record:

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

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 highlighted attribute.

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

Copy
<ais-highlight
  [...]
  attribute="name"
/>

hit

type: 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 have a _highlightResult[attribute].value property.

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


            highlighted-tag-name

type: string

default: "mark"

Optional

The HTML element that wraps the highlight.

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


            class-names

type: object

default: {}

Optional

To customize the appearance, override the appropriate class in your widget theme.

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?