Issues with InstantSearch Autocomplete and Dropdown UI
TLDR Keith was having issues implementing the Instantsearch autocomplete search field and dropdown UI. Jason clarified that querySuggestionsPlugin
is for autocomplete.js, advising to use the autocomplete widget of instantsearch.js and shared a link to style widgets. Keith successfully implemented the suggestions.
Sep 01, 2022 (16 months ago)
Keith
02:57 PMquerySuggestionsPlugin
:const querySuggestionsPlugin = createQuerySuggestionsPlugin({
searchClient,
indexName: INSTANT_SEARCH_INDEX_NAME,
getSearchParams() {
// This creates a shared `hitsPerPage` value once the duplicates
// between recent searches and Query Suggestions are removed.
return recentSearchesPlugin.data.getAlgoliaSearchParams({
hitsPerPage: 6,
});
},
transformSource({source}) {
return {
...source,
sourceId: 'querySuggestionsPlugin',
getItemUrl({item}) {
return getItemUrl({
query: item.query,
});
},
onSelect({setIsOpen, setQuery, event, item}) {
onSelect({
setQuery,
setIsOpen,
event,
query: item.query,
});
},
getItems(params) {
// We don't display Query Suggestions when there's no query.
if (!params.state.query) {
return [];
}
return source.getItems(params);
},
templates: {
...source.templates,
item(params) {
const {children} = source.templates.item(params).props;
return createItemWrapperTemplate({
query: params.item,
children,
html: params.html,
});
},
},
};
},
});
Jason
04:17 PMquerySuggestionsPlugin
is meant to be used with autocomplete.js and not instantsearch.js. Also that plugin is specifically designed to interact with Algolia’s special query suggestions index they build.If you’re just looking to implement a dropdown with suggestion, you want to use the autocomplete widget available in instantsearch.js
Here’s more context and an example: https://github.com/typesense/typesense-instantsearch-adapter/issues/88#issuecomment-1021597634
Keith
06:32 PMSep 02, 2022 (16 months ago)
Keith
02:15 AMKeith
02:19 AMJason
03:56 PMKeith
05:42 PMTypesense
Indexed 3011 threads (79% resolved)
Similar Threads
Implementing Search Suggestion/Autocomplete Functionality in Typesense
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.
Troubleshooting Typesense Setup and Understanding Facets and Keywords
Demitri encountered errors when exploring Typesense for the first time. Jason guided them through troubleshooting and discussed facets, keyword settings, and widget configurations. Helin shared a Python demo app and its source code to help Demitri with their project.
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.