50

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()
Improve this question
4
  • Which autocomplete plugin are you using? There are several variants. Commented Jul 22, 2010 at 12:47
  • Could you turn on stack tracing in firebug and post the function in which this occured? Commented Jul 22, 2010 at 12:47
  • I'm using the jQuery UI autocomplete as bundled in version 1.8.2 of the jQuery UI library. working on the stack tracing Commented Jul 22, 2010 at 12:49
  • And I found the answer, almost to embarrassed to admit that I just implemented it in the wrong way. Commented Jul 22, 2010 at 12:57

7 Answers 7

Reset to default
68

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});
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

not so embarrassing, as it says different in some documentation. How where you to guess?
Also, you may see this error or similar if source is an object with keys, like { a:A, b:B, c:C }. Should be just single values, as in { "A", "B", "C" }.
In my case,` $(".div").autocomplete();` I was having this error because class .div didn't exist
16

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

Improve this answer

4 Comments

This should get more ticks because that solved my problem.
This solved my issue too. Crazy. Oh, Stack Overflow, how I love thee (most of the time).
Exactly where and how to put it in my js code? please help @tjans
It's been so long, I don't even remember. I don't have that old code anymore, and don't use jquery anymore (React, FTW!). Sorry I can't be of more assistance.
14

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)

Improve this answer

Comments

5

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.

Improve this answer

Comments

2

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;
Improve this answer

Comments

1

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

Improve this answer

Comments

0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.