autocomplete is not a function

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.

[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