React Instant Search Custom HighLight

[romainpenaruiz]

Hello,

I am having a problem with the Customize the UI - connectHighlight.

My problem is that I have an object with products. I filtered those products based on tags. It is working fine, the problem is that those tags have prefixes. Example: Colour_. So in my front end I want to display the products without the prefixes. It is working fine as you can see in the first picture. My problem is that it does not work for the Highlighted item when I make a search. Example second picture.

.

The third picture is a solution I somehow managed to make it work. However it is still finding the prefix.
Hope that it is not too confusing. Is there a way to manipulate the value that I am receiving with he Highlight ?

my code looks like this:

import { connectHighlight } from 'react-instantsearch-dom'

const CustomHighlight = ({ highlight, attribute, hit }) => {
  const transformString = str => {
    return str.split('_').pop()
  }

  const parsedHit = highlight({
    highlightProperty: '_highlightResult',
    attribute,
    hit,
  })

  return (
    <span>
      {parsedHit.map((part, index) =>
        part.isHighlighted ? (
          <mark key={index} className="highlight-mark">
            {transformString(part.value)}
          </mark>
        ) : (
          <span key={index}>{transformString(part.value)}</span>
        )
      )}
    </span>
  )
}
export default connectHighlight(CustomHighlight)

[cindy.cullen]

Hi @romainpenaruiz, would it be possible to put this in a codesandbox so that we can better troubleshoot? You can find starter templates for React instantsearch here.

[romainpenaruiz]

Hi Cindy,

Thank you for your reply. Here is the sandbox but in order to show you what is the problem I had to create my own records. I added my keys but It’s only a test account.

{
  "price": 28.95,
  "compareAtPrice": 28.95,
  "product": {
    "productType": "Styling",
    "concerns": [
      "Concern_Blow Drying",
      "Concern_Dry"
    ],
    "choices": [],
    "colour": []
  },
}

This is the object I have. I want to filter those product tags but hide the prefix Concern_ to the user. As you can see it works fine at first but if you start typing the word Concern_ in the search box it appears and I don’t want that. Is there a way get the value before it renders and change so algolia won’t search for the word Concern_ and only search for Blow Drying ? Thank you !

here is the sandbox: https://codesandbox.io/s/tender-galileo-6ko9d?file=/src/App.js

[cindy.cullen]

Hi @romainpenaruiz,

Could you change your attribute values by removing the prefix before indexing, especially since these are in an array with a variation of that prefix?

The other option would be to intercept the search input and remove that value from the query, however, if you have that query elsewhere in the value, this will not find the value. For instance, if you remove ‘concern’ from the query (or a portion of that), then if you had a value such as ‘Concern_my_concern’, removing ‘concern’ from the query would not find ‘my_concern’ either.

[romainpenaruiz]

Hi @cindy.cullen,

Thank you so much for the fast reply and your time. You sent me to the right direction. I really appreciate it. It works now so happy ! I removed the prefix before indexing. Idk why I did not think about that before but thank you !