Highlight arrays

[bitblitter]

Do you want to request a feature or report a bug?
This is a feature request.

Feature: What is your use case for such a feature?
This feature would enable highlighting for arrays of strings.
In my specific case, I wanted to display the values separated by a comma, and highlight the matching terms.

Feature: What is your proposed API entry? The new option to add? What is the behavior?
Enable the Highlight component to be able to display string arrays, with an optional separator.

What project are you opening an issue for?

• react-instantsearch
• instantsearch.js

What is the version you are using? Always use the latest one before opening a bug issue.
I'm using the last version on npm: react-instantsearch ^2.2.5

[mthuret]

Thanks @bitblitter for opening the issue here!

this follow this discussion: https://discourse.algolia.com/t/react-instantsearch-highlight-on-field-with-array-value/469.

[julienpa]

Really looking forward to this feature too! 😃

With the help of @mikaa123, we came up with this workaround that doesn't need to change the highlighting tags:

  const highlightedAttr = hit._highlightResult.array_attr
    .map(attr => attr.value)
    .map(attr => attr.replace(/<ais-highlight-[0-9]+/, '<em class="ais-Highlight__highlighted"').replace(/<\/ais-highlight-[0-9]+/, '</em'))
    .join(', ')

and then:

<span dangerouslySetInnerHTML={{__html: highlightedAttr}} />

[mthuret]

React InstantSearch has been moved here: https://github.com/algolia/react-instantsearch
This issue has either been rewritten or placed inside our backlog.