Algolia Instantsearch Snippet

August 19, 2020

ais-highlight vs ais-snippet

ais-highlight show the entire content, with the search term highlighted.

ais-snippet shpw the relevant part of the content (especially long text), with the search term highlighted.

Setup snippet

To use snippet, you need to setup your Indices.

Goto Algolia Dashboard -> Indices -> Configuration -> PAGINATION AND DISPLAY -> Snippeting, add Attributes to snippet. Select attributes with long text where you might not want to display the entire text.

Code

<template>
  <div>
    <client-only>
      <ais-instant-search
        :search-client="searchClient"
        index-name="live"
      >

        <ais-search-box />

        <ais-hits>
          <div slot="item" slot-scope="{ item }">
            <!-- show name -->
            <h1><ais-highlight attribute="name" :hit="item"/></h1>

            <!-- show content with snippet: need to setup Snipetting in Indices -->
            <div><ais-snippet attribute="content" :hit="item"/></div>
          </div>
        </ais-hits>

      </ais-instant-search>
    </client-only>
  </div>
</template>

<script>
  // ...
</script>

<style>
/* prevent highlight overwrite font-size */
.ais-Highlight {
  font-size: inherit;
}
.ais-Highlight-highlighted {
  font-size: inherit;
}
</style>

NOTE: Refer to Setup Algolia InstantSearch on Nuxt/Vue for complete code.

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.