1. Tutorials

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.

❤️ Is this article helpful?
Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.
👶 Apps I built
Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings (or just quotes).
LuaPass - offline password manager
By Desmond Lua
A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.