How to get autocomplete to work with Algolia?

[sdrenth]

I'm trying to get autocomplete to work with Algolia Query suggestions by following these steps:
https://www.algolia.com/doc/ui-libraries/autocomplete/guides/adding-suggested-searches/

Note I'm using javascript not React and I can't use imports, so I use the code below:

const { autocomplete, getAlgoliaResults } = window['@algolia/autocomplete-js'];
const { createQuerySuggestionsPlugin } = window['@algolia/autocomplete-plugin-query-suggestions'];

const searchClient = algoliasearch('appId', 'apiKey');

const querySuggestionsPlugin = createQuerySuggestionsPlugin({
    searchClient,
    indexName: 'dev_main_query_suggestions'
});

autocomplete({
      container   : '.is-autocomplete',
      debug       : true,
      placeholder : 'Search for products',
      plugins     : ['querySuggestionsPlugin']
});

This populates the autocomplete input field:

But whenever I start typing, it never fires any XHR request or displays any suggestions. I think for some reason my searchClient is not initializing or anything. Any ideas what it could be or how I can debug this thing?

Quite annoyingly most documentation is based on React.

[Haroenv]

Did you fill in the actual values (from the dashboard) for appId and apiKey, or did you write const searchClient = algoliasearch('appId', 'apiKey');? Are there any errors in the console?

If that was the issue, please let us know so we can find a better code sample in the documentation that avoids this issue

[sdrenth]

Hi @Haroenv,

I did fill in the actual App ID and the Search-Only API Key, but I'm not receiving any error in the error log, so that's why I'm stuck at this point

[Haroenv]

It's because you wrote:

  plugins: ["querySuggestionsPlugin"]

instead of:

  plugins: [querySuggestionsPlugin]

Here's a working version with demo credentials: https://codesandbox.io/s/angry-euclid-jkj8d?file=/src/index.js

Did you get the version in quotes from a tutorial somewhere?

[sdrenth]

@Haroenv Oh my, what a stupid mistake! I think it's my own fault. I'm sorry to bother you guys with this :-)

[Haroenv]

no problem, glad it's working! A tip I have for you is using eslint or typescript, it highlighted the fact that the querySuggestionsPlugin variable wasn't used for me