Does <Highlight> support arrays?

I’m coming from React InstantSearch: Highlight on field with array value and I haven’t seen any updates since 2017 so I don’t know what is the current status for this. Does Algolia component support array values?

Let’s say I have an array of tags: tags: ["tag1", "tag2"]

Inside my loop, I want to display and highlight those elements in:

    hit.tags.map((tag, index) => <li className={`article__tag__item`} key={tag}>
          <Highlight attribute={`tags`} hit={hit} tagName="mark"/>
      </li>;

However, it throws an error:

index.js:2177 TypeError: Cannot read property ‘0’ of undefined
at Highlighter.js:50

I’ve found a workaround using:

  const highlightedAttr = hit._highlightResult.tags
    .map(attr => attr.value)
    .map(attr => attr.replace(/<ais-highlight-[0-9]+/, `<markclass="ais-Highlight__highlighted"`).replace(/<\/ais-highlight-[0-9]+/, `</mark`))

        hit.tags.map((tag, index) => <li className={`article__tag__item`} key={tag}>
              <span dangerouslySetInnerHTML={{__html: highlightedAttr}} />
          </li>;

Reference: https://github.com/algolia/instantsearch.js/issues/1932#issuecomment-287412821

Despite working almost as expected, the search query does not support whitespaces.

I would like to know how to implement a <Highlight> if support arrays and if don’t, a suitable workaround.

With a bit more research I’ve found the solution. I hope it help people to avoid the work of diving between threads :rofl:. This does the trick:

<Highlight attribute={tags[${index}]} hit={hit} tagName={mark} />

Reference: https://github.com/algolia/react-instantsearch/issues/2858

@fbuireu Thanks for the React solution.

Would you know to write the same thing in vanilla JS?

Hey!

With InstantSearch.js, you can leverage the templates property on the hits widget and template each item with the item method:

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      item(item) {
        return `<article>
        <h1>${item._highlightResult.name.value}</h1>
        <ul>${item._highlightResult.categories
          .map(({ value }) => `<li>${value}</li>`)
          .join('')}</ul>
        <p>${item._highlightResult.description.value}</p>
      </article>`;
      },
    },
  })
);

Best,

1 Like