jquery autocomplete this.source is not a function error

Viewed 66645

I've implemented autocomplete on an input field, but the box does not show up and firebug returns "this.source is not a function". I've used autocomplete on other fields of the same page without any problems. (two textarea's).

I'm using the following code to debug, same effect if I run from script file or Firebug command line.

var fakedata = ['test1','test2','test3','test4','ietsanders'];
$("#omschrijving").autocomplete(fakedata);

running jquery 1.4.2 and jquery ui 1.8.2, both minified versions.

Does anyone have an idea how autocomplete works fine on the textareas but causes this malfunctioning on inputs?

Error & Stack trace:

this.source is not a function
http://facturatie.autodealers.nl/dev/resources/js/jquery-ui-1.8.2.custom.min.js
Line 570
close(Object { name="a"})jquery....min.js (regel 570)
close(Object { name="a"}, Object { name="c"})jquery....min.js (regel 570)
response()
7 Answers

If you use it with jQuery UI library it also has plugin named autocomplete. In this case you can use plugin alias devbridgeAutocomplete:

$('.autocomplete').devbridgeAutocomplete({ ... });

This solve the problem with jQuery UI collision

Search at the end of jquery.autocomplete.js the following section:

Create chainable jQuery plugin:

$.fn.devbridgeAutocomplete = function (options, args) {....

This devbridgeAutocomplete is an alternative plugin to access to the same functionality using this lines:

if (!$.fn.autocomplete) {
    $.fn.autocomplete = $.fn.devbridgeAutocomplete;
}

So.. you can use devbridgeAutocomplete instead of autocomplete or any name by changing this $.fn.devbridgeAutocomplete

in my case I had a second import of jquery which I didn't realize. Something like:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.27/jquery.autocomplete.min.js"></script> 

// More code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>

So be sure to import the autocomplete script after you initialized jquery.

Related