jQuery UI - autocomplete error

Question

I'm using jquery.ui.autocomplete and datepicker for an implementation in my webpage.
As separate file

• jquery.ui.datePicker.js
• jquery.ui.autocomplete.js

With the following simple code

var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++",
"Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell",
"Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];

$("#City").autocomplete({
        source: availableTags
});

However I'm not able to get it working in webpage as expected, whereas datepicker is working great. Sorry, I couldn't reproduce this behavior in jsfiddle.

Error from console: pointing the jquery.ui.autocomplete.js file

Uncaught TypeError: Object [object Object] has no method 'menu'
jquery.ui.autocomplete.js:185

I've imported both js and css properly. Please share your suggestions

jQuery version: 1.8.2
jQuery UI version: 1.9.2

Answer 1

I don't know how you obtained your jQuery UI script files, but the components don't usually come in separate scripts.

The Autocomplete plugin depends on Core , Widget , Position and Menu which will define the menu plugin.

I suggest you use the entire script library, eg

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

If you insist on using separate component files, you'll also need Core , Widget , Position and Menu though I wouldn't recommend this approach.

You can customise the plugins by overwriting their implementation with your own (using prototypal inheritance) if you must but I certainly wouldn't be re-writing the source files.