Блог

// Компонент автозаполнения

 import { autocomplete } from "@algolia/autocomplete-js";
import React, { createElement, Fragment, useEffect, useRef } from "react";
import { render } from "react-dom";

export function Autocomplete(props) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) {
      return undefined;
    }

    const search = autocomplete({
      container: containerRef.current,
      renderer: { createElement, Fragment },
      render({ children }, root) {
        render(children, root);
      },
      ...props,
    });

    return () => {
      search.destroy();
    };
  }, [props]);

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

и основной код

 import { createQuerySuggestionsPlugin } from "@algolia/autocomplete-plugin-query-suggestions";

const searchClient = algoliasearch(
  "xxxx",
  "yyyyyyyyyyyyyyyy"
);

const querySuggestionsPlugin = createQuerySuggestionsPlugin({
  searchClient,
  indexName: "zzzzzzz",
  getSearchParams() {
    return {
      hitsPerPage: 5,
    };
  },
});


// component inside render

<Autocomplete
  openOnFocus={true}
  plugins={[querySuggestionsPlugin]}
  placeholder={"Search"}
/>
 

Я вижу результаты поиска как