#community-help

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.

Powered by Struct AI
7
14mo
Solved
Join the chat
Sep 01, 2022 (14 months ago)
Keith
Photo of md5-49c23d5dc46241ca1af5233658633765
Keith
02:57 PM
Hey Jason! I’m trying to add the Instantsearch autocomplete search field and I’m a bit stumped. As an actual search field, it works fine, but I can’t get the UI dropdown to work properly. Any suggestions? I think it has to do something with my querySuggestionsPlugin:
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
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
04:17 PM
Keith It looks like the querySuggestionsPlugin 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
Photo of md5-49c23d5dc46241ca1af5233658633765
Keith
06:32 PM
Ahh okay cool, I’ll give that a try
Sep 02, 2022 (14 months ago)
Keith
Photo of md5-49c23d5dc46241ca1af5233658633765
Keith
02:15 AM
Alright great, I got it working. Any suggestions on where I can grab some styling so I don’t have to start from scratch?
02:19
Keith
02:19 AM
For some reason, I’m having a hell of a time to find any examples of this usage. Other that what you sent
Keith
Photo of md5-49c23d5dc46241ca1af5233658633765
Keith
05:42 PM
Yea I was looking at that; I was just hoping to avoid having to rebuild the Autocomplete dom