Get highlights working on pure JS implementation

[markzegarelli]

I recently updated autocomplete-js to the latest version which broke highlighting on my site.

It looks like highlightHit was removed from autocomplete-js, and implemented through some component architecture. However, the docs only mention this in the context of react, not plan js, which is blocking me.

This is what I was returning previously:

  return html `<a class="aa-link" href="/docs${item.url}${anchorLink}">
  <p class="aa-title" >${highlightHit({hit: item, attribute: 'title'})}</h3>
  <p class="aa-heading">${item.headings.join(' >')}</p>
  <p class="aa-content">${highlightHit({hit: item, attribute: 'content'})}</p></a>
`;

Is there a way to re-enable highlighting with Javascript?

[francoischalifour]

You can check how highlightHit was implemented prior to the component architecture, and copy the code in your project: https://github.com/algolia/autocomplete/blob/741e7cc79803c2dd1317d6403d44978fca0cfb74/packages/autocomplete-js/src/highlight.ts

[markzegarelli]

Thanks @francoischalifour, this worked, although I had to ditch the htm library and use dangerouslySetInnerHTML as described in the docs.