jquery 自动完成 this.source 不是函数错误

Question

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

Answer 1

Answer is that the first parameter of the autocomplete should be an object containing the "source" property. This works

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

Answer 2

If you were trying to use autocomplete from http://www.devbridge.com/projects/autocomplete/jquery/#demo , it now collides with the autocomplete method in jQuery UI. I had the same problem and later noticed that I could just use the jQuery UI implementation.

(NOTE: It appears that this page's documentation is wrong: http://docs.jquery.com/Plugins/Autocomplete#Setup )

Answer 3

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

Answer 4

As Shelton stated, the version from devbridge.com (1.1.3) collides with jQuery UI (1.8.4). Got it working by making sure the devbridge version loads after jQuery UI's version.

Answer 5

Had similar problem for tagedit/autocomplete. It seems you also want to disable the autocomplete. Setting the source to false avoids these errors.

Solution:

options.autocompleteOptions.source = false;

Answer 6

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

Answer 7

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.