UI libraries / InstantSearch.js / Widgets

snippet

Signature 
snippet({
  attribute: string,
  hit: object,
  // Optional parameters
  highlightedTagName: string,
});
Import
Copy 
1

import { snippet } from 'instantsearch.js/es/helpers';
See code examples

About this widget

The snippet function returns attributes in your search results in a shorter form (a snippet). Snippeted attributes are also highlighted.

This function uses Algolia’s snippeting feature in combination with the hits or infiniteHits widgets. It’s available as a string and as a function.

To determine which attributes should be snippeted, first set them from the Algolia dashboard, the CLI, or with the API (using the attributesToSnippet parameter):

Copy 
1
2
3
4
5

search.addWidgets([
  configure({
    attributesToSnippet: ['description'],
  })
]);

With attributesToSnippet, you can also set the snippet’s size to a specific number of words (it defaults to 10). For example, attributesToSnippet: ['description:5'].

Examples

Copy 
1
2
3
4
5
6
7
8
9

hits({
  container: '#hits',
  templates: {
    item: `
      <h2>{{ name }}</h2>
      <p>{{#helpers.snippet}}{ "attribute": "description" }{{/helpers.snippet}}</p>
    `,
  },
});

Options

Parameter Description
attribute
type: string
Required

The attribute of the record to snippet. For deeply nested objects, specify a dot-separated value like actor.bio.
Copy 
1
2
3
4

snippet({
  // ...
  attribute: 'description.full',
});
hit
type: object
Required

Original hit object provided to the function. The value is already bound to the function inside a string template, so you don’t have to provide it. For this to work, the provided object must have a _snippetResult[attribute].value property.
Copy 
1
2
3
4

snippet({
  // ...
  hit: item,
});
highlightedTagName
type: string
default: mark
Optional

The name of the HTML element to wrap the snippeted parts of the string.
Copy 
1
2
3
4

snippet({
  // ...
  highlightedTagName: 'em',
});

HTML output

Copy 
1

<span>This is the <mark class="ais-Snippet-highlighted">highlighted text</mark></span>
Did you find this page helpful?
InstantSearch.js v4