Algolia Instantsearch Snippet

Aug 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.


<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 via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.