Autocomplete error: selectize is not a function

Hi!
We already have Aloglia InstantSearch implemented on our website and now I am trying to implement Autocomplete for a search bar in the nav.

However, I am struggeling with the following error message:

Uncaught TypeError: container.find(...).selectize is not a function

I am using this CDN for selectize: and is placed after the jquery CDN.
I have tried to ‘npm i selectize’, but that will also not fix the issue.

I am following the example code from https://github.com/algolia/doc-code-samples/tree/master/InstantSearch.js/autocomplete-results-page

Thanks,

Christina

Hi @christina.hastenrath,

We have a working sandbox that uses our InstantSearch + Selectize for an autocomplete experience. Can you use this to compare to your code and debug: https://codesandbox.io/s/autocomplete-results-page-hsk2s

Overall, it seems that selectize does seem to throw this error for some and it may be related to dependencies such as too many jQuery libraries being loaded or being loaded via the wrong path.

Example: https://github.com/selectize/selectize.js/issues/857
Example: https://stackoverflow.com/questions/31531300/uncaught-typeerror-selectize-is-not-a-function
Example: https://en.programqa.com/question/56728876/

1 Like

Hi @ajay.david,

Thank you very much for your reply. In the Sandbox, autocomplete works fine with our Algolia Index. I think it might be our jQuery colliding with the jQuery that Selectize is pulling in. I will let you know if I find a solution.

Hey,

It seems that selectize does not work with out jQuery 2.1.4. I have updated our jQuery to 3.2.1.
I now am receiving a new error message:

Uncaught ReferenceError: module is not defined
    at cdn.jsdelivr.net/npm/selectize@0.12.6/dist/js/standalone/selectize.min.js:3

Have you seen this before?

Hi @christina.hastenrath,

I can’t say that I have because that is the version and CDN we use in our example sandbox. I’ve included our used CDNs below in case helpful for easy reference:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.1.0/themes/algolia.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/selectize@0.12.6/dist/css/selectize.css">

 <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/selectize@0.12.6/dist/js/standalone/selectize.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/algoliasearch@3.30.0/dist/algoliasearchLite.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@beta"></script>

Hi @ajay.david,
Thank you very much for your help. I am assuming this error is lying no our side and the way our site is build. We cannot get autocomplete to work and will do a workaround with InstantSearch.

Really appreciate your help,

Christina