React-instantsearch: Highlight: support arrays

[mthuret]

Use case

Your records contain a field that is an array of strings and you want to highlight them.

Need

The <Highlight/> and <Snippet/> widgets are not compatible with an array of strings.

Proposal

TBD

See https://github.com/algolia/instantsearch.js/issues/1932

[pixelastic]

I add my voice that this would be very useful. I can't find an elegant (ie. one that does not involve regexp and dangerouslySetInnerHTML) way to do it :/

[sepehrfakour]

I'd like to add my +1 to this. 👍

[vvo]

@sepehrfakour Add reaction to original post :) (This can be used for sorting issues by 👍 )

[sepehrfakour]

@vvo Done. Thanks!

[Haroenv]

A related workaround can be found at the Yarn website source. Here sorting is also handled, so that should not matter for most implementations. The implementation is not much more than a .split() on the highlightTags of the current instance. This stays the same on each import, but varies over builds.

Similar logic where an array is given and returned, so it can be mapped or joined in the user's code should be the preferred way to go!

[joshuataylor]

Would this also be the ticket to track when an array is used, and we search within the array? For example:

{
  "objectID": 123,
  "title": "Foobar",
  "fruits": [
    {
      "title": "Hello!",
      "slug": "hello"
    },
    {
      "title": "Something else",
      "slug": "something-else"
    }
  ]
}

So I can search for "hello", and it would return this record, but would be useful to be able to filter this, as I currently do something like this:

          {hit.fruits.map(fruit =>
            <FruitItem fruit={fruit}/>
          )}

It would be nice if I could highlight the found results inside of an array.

Sorry if this is not the correct ticket, if I need to create another one, I will, or if I figure out a solution I'll update this.

[Haroenv]

Regardless of if we should implement this or not, what we usually advice is for one "item" to be one object. You can use DISTINCT to group the different objects together then. Basically here you'd have two different hits, and there wouldn't be a need to map it.

Regardless of that, it is probably possible to access the _highlightResult and get the highlighted string there as a workaround now

[joshuataylor]

That's not a good idea, especially given the pricing of algolia. Sure it might work if you have unlimited records, but also means you have to index way more anyway... just for highlighting of found items in the array? I don't want to filter, just highlight the match. I'll take a look at _highlightResult.

[rtman]

@marielaures Just wondering if there's any progress on this?

[marielaures]

@rtman yes, it's coming soon, stay tuned!

[fernandoem88]

My workaround is to build a search result for every array item at render method.
I have an array of cars for each user.
see my code and let me see if there is a better way.
const HighLighter = ({ attribute, hit }: any) => {
return (
<HGStyle key={attribute}>{attribute}: &nbsp;
<Highlight attribute={attribute} hit={hit} className="hg-style" tagName="span" />
</HGStyle> ); };

function Hit(props: any) {
return (
<div>
{["name", "sex"].map((key, i) => {
return <HighLighter key={key} hit={props.hit} attribute={key} />;
})}
<div> <div>cars</div> <div>
{props.hit.cars.map((car: any, idx: number) => { return ( <HighLighter key={idx}
hit={{ ...car, _highlightResult: props.hit._highlightResult.cars[idx] }}
attribute="name" /> ); })}
</div> </div> <div className="hit-age">age: {props.hit.age}</div> </div> ); }