Highlighting Autocomplete matches

Open Q&A
,
#1

Hello,

I’m trying to highlight matches in my auto complete drop down, but what I’m getting is __aa-highlight as shown in the image below.

Screen Shot 2022-05-24 at 6.56.18 PM

Here’s the autocomplete code:

const Autocomplete = (props: any) => {
  const containerRef = useRef(null);
  useEffect(() => {
    if (!containerRef.current) {
      return undefined;
    }

    // Initialize autocomplete on the newly created container
    const search = autocomplete({
      container: containerRef.current,
      renderer: {createElement, Fragment, render},
      // Autocomplete render()
      // https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-render
      render({children}, root) {
        // react-dom render
        // https://reactjs.org/docs/react-dom.html#render
        render(children, root);
      },
      ...props,
    });

    // Destroy the search instance in cleanup
    return () => {
      search.destroy();
    };
  }, [props]);

  return <div ref={containerRef} />;
};

export default Autocomplete;

And then using that component:

<Autocomplete
        placeholder='Search products'
        detachedMediaQuery='none'
        openOnFocus
        defaultActiveItemId={0}
        getSources={() => [
          {
            sourceId: 'hits',
            getItems({query}: {query: any}) {
              return getAlgoliaResults({
                searchClient,
                queries: [
                  {
                    indexName: 'index_name',
                    query,
                    params: {
                      attributesToHighlight: ['title', 'category'],
                    }
                  },
                ],
              });
            },
            getItem({item}: {item: AlgoliaHit}) {
              return item;
            },
            templates: {
              header() {
                return <AutoCompleteHeader title='All Resources' />;
              },
              item({item}: {item: AlgoliaHit}) {
                return <Hit hit={item} />;
              },
            },
          },
        ]}
        />

And in the custom Hit component:

<Highlight hit={hit} attribute='title' />```
#2

So it looks like I was missing extracting the “components” prop from the templates object.

            templates: {
              header() {
                return <AutoCompleteHeader title='All Resources' />;
              },
              item({item, components}: {item: AlgoliaHit, components: any}) {
                return <Hit hit={item} components={components} />;
              },

and then update the custom hit component to this:

<components.Highlight attribute='title' hit={hit} />