Highlight prefix tag - instantsearch.js

Is there a way to change the default <em> tag for highlights at query-time?

You can adjust it via the highlightPreTag and highlightPostTag parameters.

Docs:
https://www.algolia.com/doc/api-client/javascript/parameters/highlightPreTag/

2 Likes

Ahh ok, so to use setSettings with instantsearch.js I have to include the algoliasearch API client.
So like this:

// custom client
var customClient = algoliasearch('your_appID', 'api_key');
var customIndex = customClient.initIndex('your_index');
customIndex.setSettings({
   highlightPreTag: '<em>',
   highlightPostTag: '</em>'
}, function(err, content) {
  if (err) {
    throw err;
  }
});

// then
var search = instantsearch({
  appId: 'your_appID',
  apiKey: 'api_key',
  indexName: 'your_index',
  createAlgoliaClient: function(algoliasearch, appId, apiKey) {
    return customClient;
  }
});

Is there a way to do this using only instantsearch.js’s methods to avoid including that additional dependency?

I have the exact same question!

Is there a way to manipulate the <ais-highlight> component or the search store to specify the pre/post highlight tags? Or is @mattucci 's example the way to go?

Thanks in advance to anyone who can help!

For anybody else that needs this - a workaround that’s doing the job well: Set the search store manually and then directly manipulate the highlight prefixing…

E.g.

const searchStore = createFromAlgoliaCredentials('<AppId>', '<APIKey>');
searchStore._highlightPreTag = '<span class=highlight>';
searchStore._highlightPostTag = '</span>';

And make sure to set the store in your index:

  <ais-index
    :search-store="searchStore"
>

Lastly, returning the searchStore in your data…