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

Dunbarton

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

Neutrino

Why don't they update the documentation with each release, this is so annoying. Thanks anyway. – Poddy

Maybe that's because one of the two things we developers hate most is documenting things ? :) And the second must be filling timesheets I suppose – Neutrino

data('uiAutocomplete') doesn't work for me. Also currently on the jquery-ui demo website they have it as data('ui-Autocomplete'). I think the issue is the .data property itself. It is not defined, no matter with what argument you call it. – Bally

In my version, it is absolutely "uiAutocomplete". You can debug it with Chrome and you'll see the name of the attribute by calling .data() – Neutrino

JQuery 1.7.2 / JQueryUI 1.10.2 - I'm finding both uiAutocomplete and ui-Autocomplete work just fine! – Ream

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.

Varix

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!

Ignitron

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

Incorporeity

Hi Sheikh, thanks for your response. You are correct that was an error in my code (corrected edit) but it is not the source of the issue I'm experiencing. – Dunbarton

Also for test, can you please try to replace this "<a><img src='" + item.image + "' alt='no photo'/></a>" with this "<img src='" + item.image + "' alt='no photo'/><a>item.label</a>" or just remove the img tag completely, only for test, please let me know if it makes any changes. – Incorporeity

The error I'm getting in the console is '.data(“autocomplete”) is undefined'. I get thie even if the data callback function is empty – Dunbarton

Try .data("autocomplete")?._renderItem, notice the ? – Incorporeity

Or wrap your autocomplete call inside if(typeof $('#yourInputName').val()!="undefined"){ $("input#testInput").bind("autocompleteselect", function (event, ui) { }).autocomplete({...} } – Incorporeity

Answer 5

If you look at the latest example of combobox on the site demo, you will see they use data('ui-Autocomplete'). I ran into the same problem as you. I was previously using jquery-1.6.2 and jquery-ui-1.8.16. Once I updated my files to jquery-1.9.1 and jquery-ui-1.10.0 the error was fixed. I assume the older jquery-ui autocomplete was not setting the data('ui-Autocomplete') property, therefore it was null/undefined when retrieved. I hope this helps other people since you probably already fixed the issue.

Bally

Answer 6

You can implement the below mentioned line

.autocomplete( "instance" )._renderItem = function( ul, item ) {

instate of

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

as per the documentation available at Jquery site Jquery AutoComplete Documentation and example you will find this code.

from upgraded version of jquery 1.10 they have made change in code. hope this will help you.

Teucer