API Reference / InstantSearch.js Widgets / snippet
Apr. 24, 2019

snippet

Widget signature 
instantsearch.snippet({
  attribute: string,
  hit: object,
  // Optional parameters
  highlightedTagName: string,
});
See code examples

About this widget

The snippet function returns any attribute from a hit into its snippeted form, when relevant.

This function leverages the snippeting feature of Algolia and is designed to work with the hits or infiniteHits widget. This helper is available in both forms: as a string and as a function.

The attribute must be set in attributesToSnippet, either inside the Algolia dashboard or at runtime:

Copy
1
2
3
4
5

search.addWidget(
  instantsearch.widgets.configure({
    attributesToSnippet: ['description'],
  })
);

Examples

Copy 
1
2
3
4
5
6
7
8
9

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

Options

attribute
type: string
Required

The attribute of the record to snippet. You can give a dot-separated value for deeply nested objects, like description.full.
Copy 
1
2
3
4

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

Original hit object provided to the function. Note that 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

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

instantsearch.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 v3