React InstantSearch: Highlight on field with array value

Hi all,

I have an index with a field consisting of an array with multiple strings. I want to highlight the words that match in this field, I tried using the highlight component and the highlight connector, but it seems both expect the value of the field to be a string, not an array of strings.

Is there any way to highlight the words from a string array field that match the query?

Thanks!

1 Like

Hi @carles,

You just spotted a miss. Our current <Highlight> widget and connector doesn’t handle arrays as a possible value.

Can you open an issue on Github so that we can work on it?

As for now, here’s a workaround to still be able to perform some highlighting.

  1. add the <Configure/> widget like that (you can choose whatever tags suits you best):
    <Configure highlightPreTag="<em>" highlightPostTag="<em>"/>

And then inside your hit component, you can access the highlight structure from Algolia under hit._highlightResult.

For example, if you have an attribute named type that contains an array of strings, then you could write something like this:

    <div dangerouslySetInnerHTML={{__html: hit._highlightResult.type[0].value}}/>

Let me know how it goes,

Hi @marielaure.thuret ,
Thanks!
It worked, although I had other Highlight components that showed the em tags escaped as part of the content, not as HTML.

To prevent this, I replaced them with a custom one that uses the same solution as the workaround, and created a new component to highlight values with an array.

I opened an issue in github as proposed:

Thank you again!

1 Like

What would be the work around for this using instantsearch.js?

1 Like

I’m using instantsearch and am having an issue mentioned by @carles above. My highlightPre and highlightPost tags are being shown as content around the term which should be highlighted. I changed the default to as shown below

var search = instantsearch({
     
  appId: 'xxx',
  apiKey: 'xxx',
  indexName: 'test-index',
  urlSync: true,
  searchParameters: {
  hitsPerPage:10,
  highlightPreTag: '<span>',
  highlightPostTag: '</span>'
  }
});

Any ideas on how to resolve this?