jQuery Autocomplete .data("autocomplete") is undefined

Question

When I try to implement auto-complete using the code below I get an error stating:

.data("autocomplete") is undefined

How ever if I remove the .data() method from the end it works fine (just with out the customizable graphics that .data() provides). Can anyone tell me what's going wrong?

$("input#testInput").bind("autocompleteselect", function (event, ui) {

  }).autocomplete({
      appendTo: "#autoCompList",
      source: function (request, response) {
          $.ajax({

              url: JSONP CALL URL
              dataType: "jsonp",
              data: {
                  featureClass: "P",
                  style: "full",
                  maxRows: 12,
                  name_startsWith: request.term
              },
              success: function (data) {
                  response($.map(data.data, function (item) {
                      fbPageJson = item;
                          return {
                              label: item.name,
                              image: item.picture,
                              json: item,
                          }
                  }));
              },
          });
      }

  }).data("autocomplete")._renderItem = function (ul, item) {
      return $("<li></li>").data("item.autocomplete", item).append("<a><img src='" + item.image + "' alt='no photo'/></a>" + item.label).appendTo(ul);
  };

Answer 1

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);
            };
        }
    }

Answer 2

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.

Answer 3

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!

Answer 4

Actually in your success function you are calling response and returning an object like

return {
           label: item.name,
           image: item.picture,
           json: item,
       }

but in the following line

return $("<li></li>").data("item.autocomplete", item).append("<a><img src='" + item.image + "' alt='no photo'/></a>" + item.label + " Number of Likes: " + item.likes).appendTo(ul);

you are using item.likes that is not available in your returned object, so it's the problem. I think you can use it like

success:function(data) {
    var result = $.map(data, function (item){
    return {
            label: item.name,
            image: item.picture,
            item.likes 
        };
    });
    response(result);
}

Also keep the item.label inside the <a></a> (it may not a cause for the error), like

return $("<li></li>").data("item.autocomplete", item).append("<a><img src='" + item.image + "' alt='no photo'/>"+item.label+"</a>").appendTo(ul);

and make sure in the following line

$.map(data.data, function (item) // notice data.data

whether it should be data.data or only data. You can also remove the json: item from the object because you didn't use it anywhere, as far as I'm concerned.

Update: Change following line

.data("autocomplete")._renderItem = function (ul, item) {...};

to

.data("autocomplete")?._renderItem = function (ul, item) {...}; // notice the ? mark

or

if(typeof $('#Your_Input_Id').val()!="undefined")
{
    $('#Your_Input_Id').autocomplete({....});
}

or

var mydata=$('#Your_Input_Id').autocomplete(...).data('autocomplete');
if(mydata)
    mydata._renderItem = function (ul, item) {...};