What is wrong with this Autocomplete Code (JQuery-UI AutoComplete)

Question

$("#Auto").autocomplete({
minLength: 4,
type: 'GET',
source: function (request, response) {
    var term = request.term;
    if (term in cache) {
        response(cache[term]);
        return;
    }
    var url = '<%=Url.Action("AutoComplete", "Thing", new {area = "Admin"}) %>' + "?terms=" + request.term;
    lastXhr = $.getJSON(url, request, function (data, status, xhr) {
        cache[term] = data;
        if (xhr === lastXhr) {
            response(data);
        }
    });
}
})
    .data("autocomplete")._renderItem = function (ul, item) {
          return $("<li></li>")
.data("item.autocomplete", item)
    .append("<a> Thingy1: " + item.Prop1 + " Thingy2: " + item.Prop2 + "<br>" + "</a>")
    .appendTo(ul);
      };

Assume #Auto, Prop1 and Prop2 exist and there is a controller called Thing. This does work on another page but for some reason I get this error on a page:

$("#Auto").autocomplete({minLength: 4, type: "GET", source: function (request, response);var term = request.term;if (term in cache) {response(cache[term]);return;}var url = '<%=Url.Action("AutoComplete", "Thing", new {area = "Admin"}) %>' + "?terms=" + request.term;lastXhr = $.getJSON(url, request, function (data, status, xhr) {cache[term] = data;if (xhr === lastXhr) {response(data);}});}}).data("autocomplete") is undefined

I have the following files loaded:

jquery-ui-1.8.2.custom.min.js
jquery-1.4.2.min.js
jquery.autocomplete.pack.js
jquery.ajaxQueue.js
jquery.bgiframe.min.js
thickbox-compressed.js
jquery-ui-1.8.2.custom.css
jquery-require.1.1.packed.js

plus some other custom stuff.

Is there anything I am missing, or do I have too many files included?

Answer 1

First of all, cleaning up your code (which looks to be lazily cut & pasted) and explaining what you are trying to do would help.

However, at first glance I can see your error says:

.data("autocomplete") is undefined

Which would imply that no elements called "autocomplete" exist on the page. Try changing

.data("autocomplete")

to

.data("#Auto")

if you are trying to store the data contained in your autocomplete control for later use.

Answer 2

I'm afraid to say Terry's response is wrong. Your code is not an element selector. The data function is used to retrieve a data object that's been linked to an HTML element. In your case, you're retrieving the data linked to the element with id Auto.

var data = $("#Auto").data("autocomplete");
// data is now an object stored by the autocomplete plugin.

Your problem seems to imply that no data with key autocomplete could be found. I'm not sure how that could happen unless your autocomplete script isn't doing their job.

Answer 3

Dysprosium is wrong, not Terry. Here is a source link of the change: http://jqueryui.com/upgrade-guide/1.10/#removed-data-fallbacks-for-widget-names

dialog is now ui-dialog, or uiDialog, autocomplete is now ui-autocomplete, etc. ect.