#reactjs #algolia
Вопрос:
// Компонент автозаполнения
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"}
/>
Я вижу результаты поиска как