Implementing Search Suggestion/Autocomplete Functionality in Typesense
TLDR Denis needed advice on implementing search suggestions in Typesense. Jason provided a solution for fetching after 3+ letters. However, questions on design pattern and passing hooks remain unanswered.
1
Apr 04, 2022 (21 months ago)
Denis
11:30 AMWe are trying to implement search suggestion/autocomplete functionality.
We want to fetch after 3+ letters only.
Is it possible, if it is, how to do it?
Dependencies: “react-instantsearch-dom”: “^6.21.1", “typesense-instantsearch-adapter”: “^2.2.0"
Typesense schema:
type Word = {
w: string;
lang: string;
};
import React, { useState } from "react";
import { SearchInput } from "../../components";
import TypesenseInstantsearchAdapter from "typesense-instantsearch-adapter";
import { InstantSearch } from "react-instantsearch-dom";
const Page = () => {
const typesenseInstantSearchAdapter = new TypesenseInstantsearchAdapter({
server: {
apiKey: `${process.env.API_KEY}`,
nodes: [
{
host: `${process.env.HOST}`,
port: `${process.env.PORT}`,
protocol: `https`,
},
],
},
additionalSearchParameters: {
queryBy: "word",
perPage: 8, // we've tried perPage: search.length < 3 ? 0 : 8, but that causes re-renders and doesn't solve the problem since it still fetches.
},
});
const [search, setSearch] = useState("");
return (
<div className="flex justify-center">
<InstantSearch
indexName="words"
searchClient={typesenseInstantSearchAdapter.searchClient}
>
<SearchInput
setSearch={setSearch}
search={search}
button={true}
reload={false}
/>
</InstantSearch>
</div>
);
};
export default Page;
Thanks in advance for any tips!
Jason
03:56 PMYou would have to replace "algoliaClient" with the
searchClient
that comes with the Typesense adapterDenis
05:37 PMIs there another way to create the current searchbox + hits component without nesting the components? That would give us full control over the state?
Is it possible to pass down react hooks as props to components which use connectSearchBox or connectHits?
Thanks!
Jason
06:07 PM1
Typesense
Indexed 3015 threads (79% resolved)
Similar Threads
Connecting React Instant Search with Typesense Adapter
KARTHICK sought help with an error when using Typesense Adapter for React Instant Search. Jason advised substituting import statements. After uninstalling the react-instantsearch-dom package, KARTHICK resolved the issue.
Issues with Typesense Frontend Search Integration
Akash experienced issues integrating Typesense into their frontend search, particularly with their search box. Jason guided them to troubleshoot, eventually identifying the issue to be with react-instantsearch-dom and suggesting a downgrade to react 17, which resolved the issue.
Implementing State Export Feature Using Typesense InstantSearch.js on Node.js Backend
Kyle needed help passing search state to backend for implementing an "Export" feature, while using Typesense InstantSearch. Jason provided multiple solutions including advice on using Typesense InstantSearch adapter. The issue was resolved after some iteration.