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'
                }
            });
        }

Nicolettenicoli

Are you loading the materialize JavaScript script in your HTML? See materializecss.com/getting-started.html – Stint

I'm running into the same issue – Gastritis

You should read TypeError: "x" is not a function – Workhouse

You can find an answer for autocomplete using https://mcmap.net/q/1776385/-materialize-autocomplete-with-dynamic-data-in-jquery-ajax – Livable

Answer 1

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

Adest

Please explain your answer – Workhouse

put autocomplete in jquery function – Adest

@Workhouse I had the same issue, this is the correct answer for me. The reason is because the materialize.js file loads the autocomplete plugin inside a $(document).ready block, so if you try to use autocomplete before the document is loaded it will not be defined. I had the same problem for chips (material_chip plugin) which in turn will use autocomplete if specified. – Diversiform

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. :(

Missy

Answer 3

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

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

Coccus

Answer 4

my workaround:

copy function:

/**************************
* Auto complete plugin  *
*************************/

$.fn.autocomplete = function (options) {
// Defaults
var defaults = {
    data: {}
};

options = $.extend(default

(...)

}); // End of $(document).ready (1)

/*******************
 *  Select Plugin  *
 ******************/

from materialize.js (line number ~3000) or from source file /js/forms.js (line number ~281)

remove last line:

}); // End of $(document).ready (1) 

it closing function started more more before...

and put it manualy into your javascript function body

$(document).ready(function() { 
//paste it here
})

Genip

Answer 5

My problem was solved by downgrading my jQuery version to V2.1.4 as Materialize CSS uses.

Mayor

Mind you, this isn't explicitly stated in the documentation. Another reason to stop library dependencies. – Mayor

Answer 6

Yes, as Wesley Williams` mentioned before, the version of Materialize JS file does matter! I has this js file of version 0.97.3 and I could never get a simple standard example to work.

In the end it turned out that this version does not support the function autocomplete, so I had to upgrade to the newest version and it worked fine.

Fridell