Materialize: autocomplete is not a function

[ericlormul]

Hi, I'm working on a rails application using materializecss gem.

markup:

<div class="row">
  <div class="col s12">
    <div class="row">
      <div class="input-field col s13">
        <i class="material-icons prefix">textsms</i>
        <input type="text" id="autocomplete" class="autocomplete">
        <label for="autocomplete">Autocomplete</label>
      </div>
    </div>
  </div>
</div>

js:

$(document).ready(function(){
  $('input.autocomplete').autocomplete({
             data: {
                 "Apple": null,
                 "Microsoft": null,
                 "Google": null
             }});
});

but got the error:
TypeError: $('input.autocomplete').autocomplete is not a function. (In '$('input.autocomplete').autocomplete', '$('input.autocomplete').autocomplete' is undefined)

Then, I tried to execute following snippet in browser console:

  $('input.autocomplete').autocomplete({
             data: {
                 "Apple": null,
                 "Microsoft": null,
                 "Google": null
             }});

Then, the autocomplete works. Could anybody help with this? Thank you very much.

[acburst]

Make sure you are including your js in the right order

[ericlormul]

@acburst Thanks for your reply.

Following is the js manifest used for the page:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require materialize-sprockets
//= require materialize/extras/nouislider
//= require_tree ./user

$(document).ready(function(){
  $('input.autocomplete').autocomplete({
             data: {
                 "Apple": null,
                 "Microsoft": null,
                 "Google": null
             }});
});

above snippet is under ./user directory. Is this the culprit? Additionally, so far, autocomplete() function is the only one with this error. Other functions like tooltip(), collapsible() work fine, which confused me a lot 😵

[pingshunhuangalex]

+1. Can confirm this issue when I try to implement this in Vue too, and all JS should all be included properly.

The only solution here is to wrap the entire function into any JQuery function like you mentioned above, even an empty one would do.

[ericlormul]

It turn out that the problem is turbolink, which makes javascript loading order mysterious. Remove turbolink, autocomplete works.

[pingshunhuangalex]

Well, I don't use turbolink and I load JQuery first followed by Materialize. Hard to think if there is anything else that could go wrong...

I checked lots of threads on stackoverflow, and people all mention wrapping autocomplete in JQuery function and it does work, so I'm not really sure here? Possible conflict between JQuery called in Materialize and JQuery itself?

[drzhnin]

i use materializecss gem and when i use $('input.autocomplete').autocomplete i get error TypeError: $('input.autocomplete').autocomplete is not a function. (In '$('input.autocomplete').autocomplete', '$('input.autocomplete').autocomplete' is undefined).
Disabling turbolinks did not lead to success.

[prashantkhurana]

Happening here also

• with Vue
• directly importing from cdn
• jquery-2.1.1 then 0.98.2/css/materialize.min.css and last 0.98.2/js/materialize.min.js

I wrapped it then under $(document).ready as suggested and it works fine.

$(document).ready(function(){
  $('.chips-autocomplete').material_chip({
    autocompleteOptions: {
      data: {
        'Apple': null,
        'Microsoft': null,
        'Google': null
      },
      limit: Infinity,
      minLength: 1
    }
  });
});

[Kacxxia]

Also happening with plain html ,
'$(document).ready()' solves the problem