Components Highlight

Highlight

Safely displays highlighted attributes of your search results.

This component leverages the highlighting feature of Algolia but adds some sugar on top of it to prevent XSS attacks.

Usage

Basic usage:

<ais-highlight :result="result" attribute-name="description"></ais-highlight>

Access a nested property:

Given an record like:

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

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

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

Advanced use cases:

For more complex data structures, it will be necessary to leverage the _highlightResult object directly. For example, consider the case of an array of keywords:

<ais-results>
  <template slot-scope="{ result }">
    <p v-for="keyword in result._highlightResult.keywords" v-html="keyword.value"></p>
  </template>
</ais-results>

Props

Name	Required	Type	Default	Description
result	true	Object		A single Algolia result as it is returned by the API.
attribute-name	true	String		The attribute name to be highlighted.

CSS Classes

ClassName	Description
ais-highlight	Container class