jQuery Autocomplete .data("autocomplete") is undefined

I had the same problem and based on the 1.10.0 version of jquery ui, I think you should try

data('uiAutocomplete')

instead of

data('autocomplete')

Based on Johnny's comment, I checked how the .data() function works. Yes, jQuery returns null from .data() call when selector does not find any items.

So if there is no matching element for your selector, then no autocomplete object is created and added to the custom data object.

So it seems it is better to do this:

    $(selector).autocomplete({ your autocomplete config props here });    if ( $(selector).data() ) {    // some jQueryUI versions may use different keys for the object. so to make sure,    // put a breakpoint on the following line and add a watch for $(selector).data().     // then you can find out what key is used by your jQueryUI script.        var ac = $(selector).data('uiAutocomplete');        if ( ac ) {           // do what you want with the autoComplete object. below is the changed version of an example from jqueryUI autocomplete tutorial           ac._renderItem = function(ul, item) {                return $("<li>")                    .append("<a>" + item.label + "</a>")                    .appendTo(ul);            };        }    }

data('ui-Autocomplete') resolved my troubles. I think it's from jquery 1.7 with jquery-ui 1.8. data('autocomplete') was ok. The same script with a recent version of these files doesn't work.

I found the solution!

Somepeople think that "ui-autocomplete" is wrong, so they use "autocomplete" or "uiAutocomplete", but that is wrong. Actually, "ui-autocomplete" is the right way to do this.

I have the same issue you have, and I find with a friend the problem of this code. Instead:

.data('ui-autocomplete')._renderItem = function (ul, item) {       if (!_.include(self.idArr, item.id)) {            return $('<li></li>').data('ui-autocomplete-item', item).append('<a>' + item.name + '</a>').appendTo(ul);            }    };

Use:

._renderItem = function (ul, item) {      if (!_.include(self.idArr, item.id)) {         return $('<li></li>').data('ui-autocomplete-item', item).append('<a>' + item.name + '</a>').appendTo(ul);           }       };

I think combobox and autocomplete returns a data('ui-autocomplete'), so if you type .data('ui-autocomplete') you're doing something like:

.data('ui-autocomplete').data('ui-autocomplete')

What's wrong....well, actually I don't know why this don't work and why without this works, but trust me, delete .data('ui-autocomplete') and be happy!