CODEWITHSUNDEEP
javascriptjquerypolymerpolymer-1.0materialize
Yahya Ayash Luqman
Yahya Ayash Luqman

Reputation: 492

Materialize.css autocomplete not working with Polymer

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

Upvotes: 6

Views: 4026

Answers (6)

Rocckk
Rocckk

Reputation: 426

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.

Upvotes: 0

Plendor
Plendor

Reputation: 310

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

Upvotes: 0

Alireza
Alireza

Reputation: 2740

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

Upvotes: 5

RandomCode
RandomCode

Reputation: 11

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

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

Upvotes: 1

Sed Ted
Sed Ted

Reputation: 1

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

Upvotes: 0

Wesley Williams
Wesley Williams

Reputation: 11

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

Upvotes: 1

Related Questions