Materialize.css autocomplete not working with Polymer

Question

I am trying to use Materialize.css autocomplete with my Polymer project.

Console Log:

Uncaught TypeError: $(...).autocomplete is not a function

My Code:

<div class="input-field">
    <input type="text" id="assemp" class="autocomplete" value="{{emps::input}}">
    <label for="assemp">Assigned Employee(s)</label>
</div>

Script:

attached : function() {
            $('input.autocomplete').autocomplete({
                data: {
                    "Apple": null,
                    "Microsoft": null,
                    "Google": 'http://placehold.it/250x250'
                }
            });
        }

Answer 1

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

Answer 2

Make sure you are loading the most recent materialize.js file. I had an older version where the autocomplete plugin was not in the JS and it was throwing that same error. Went away after I updated. However i still can't get the autocomplete to work. :(

Answer 3

I ran into a similar issue with react. If I execute the code within jquery it seems to work.

$(() => {
  $(...).autocomplete();
});