ais-highlight

Visually highlights matched terms in search results.

Signature

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

Import

Component

To ensure optimal bundle sizes, see Optimize build size.

Vue

import { AisHighlight } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

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

Plugin

This imports all widgets, even the ones you don’t use. For more information, see Get started with Vue InstantSearch.

JavaScript

import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

Vue.use(InstantSearch);

See this widget in action

Preview this widget and its behavior.

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

Vue

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

Access a nested property

Given this record:

JSON

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

Access the highlighted version by specifying the path separating levels with dots:

Vue

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

Props

attribute · string · required

The highlighted attribute.

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

Vue

<ais-highlight
  [...]
  attribute="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 have a _highlightResult[attribute].value property.

Vue

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

highlighted-tag-name · string · default: "mark"

The HTML element that wraps the highlight.

Vue

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

class-names · object · default: "{}"

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.

Vue

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

HTML output

HTML

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