Issues with InstantSearch Autocomplete and Dropdown UI

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,
                            });
                        },
                    },
                };
            },
        });

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

Ahh okay cool, I’ll give that a try

Alright great, I got it working. Any suggestions on where I can grab some styling so I don’t have to start from scratch?

Did you already try the themes here: https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/js/#style-your-widgets

Yea I was looking at that; I was just hoping to avoid having to rebuild the Autocomplete dom