Search code examples
jquerycssjquery-uijquery-ui-autocompletematerialize

Materialize CSS autocomplete with JQuery UI error Uncaught TypeError: this.source is not a function


I'm using Materialize CSS library and in that, there is an option to make autocomplete dropdown (you can find that at the end of the page)

if I try to use that, when I typing something it is showing me this error

Uncaught TypeError: this.source is not a function
at t.(anonymous function).(anonymous function)._search (http://localhost/imgup/js/jquery-ui.min.js:2345:101)
at t.(anonymous function).(anonymous function)._search (http://localhost/imgup/js/jquery-ui.min.js:139:77)
at t.(anonymous function).(anonymous function).search (http://localhost/imgup/js/jquery-ui.min.js:2341:175)
at t.(anonymous function).(anonymous function).search (http://localhost/imgup/js/jquery-ui.min.js:139:77)
at t.(anonymous function).(anonymous function). (http://localhost/imgup/js/jquery-ui.min.js:2337:74)
at i (http://localhost/imgup/js/jquery-ui.min.js:302:62)

I searched for this question but I didn't find any useful answers

this is my Materialize CSS - HTML code

<input type="text" id="autocomplete-input" class="autocomplete">

and this is javascript for autocomplete

$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": 'http://placehold.it/250x250'
},
limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
onAutocomplete: function(val) {
// Callback function when value is autcompleted.
},
minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
});

and there are some screenshots that where I'm getting error as below error log

Error in console: Error in console

Error in file that is occurring - 1: Error in file that is occurring - 1

Error in file that is occurring - 2: Error in file that is occurring - 2

Error in file that is occurring - 3: Error in file that is occurring - 3

Error in file that is occurring - 4: Error in file that is occurring - 4

Error in file that is occurring - 5: Error in file that is occurring - 5

how can I fix this? please help me


Solution

  • Which version of jQuery/Materialize are you using? Check out this pen where it's working:

    http://codepen.io/anon/pen/RpBRjJ

    Did you wrap your jQuery code in something like $(document).ready()?