Cannot set property '_renderItem' of undefined jQuery UI autocomplete with HTML

Question

I'm using the following code to render my jQuery UI autocomplete items as HTML. The items render correctly in the autocomplete control, but I keep getting this javascript error and can't move past it.

Firefox Could not convert JavaScript argument

Chrome Cannot set property '_renderItem' of undefined

  donor.GetFriends(function (response) {
    // setup message to friends search autocomplete
    all_friends = [];
    if (response) {
        for (var i = 0; i < response.all.length - 1; i++) {                
                all_friends.push({
                    "label":"<img style='padding-top: 5px; width: 46px; height: 46px;' src='/uploads/profile-pictures/" +
                        response.all[i].image + "'/><br/><strong style='margin-left: 55px; margin-top: -40px; float:left;'>" +
                        response.all[i].firstname + " " + response.all[i].lastname + "</strong>",

                    "value":response.all[i].firstname + " " + response.all[i].lastname,
                    "id":response.all[i].user_id});
            }
        }        

    $('#msg-to').autocomplete({
        source:all_friends,
        select:function (event, ui) {               
            // set the id of the user to send a message to
            mail_message_to_id = ui.item.id;
        }

    }).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append($("<a></a>").html(item.label))
            .appendTo(ul);
    };
});

Not sure why it is throwing this error, or what I have to do to get past it...Any help is appreciated.

Teetotum

Is there an element with Id #msg-to on the page? – Igniter

Yes there is...$("#msg-to") is a text input field, that the .autocomplete is binding to. – Teetotum

this helped: #5591276 – Nealon

FYI, to anyone using the _renderItem() method to populate something OTHER than the original UL (i.e. a SELECT OPTION), I could only get this to work by returning the LI (as above) AFTER the other object is populated. – Trimolecular

Answer 1

Since I just joined and can't comment on drcforbin's post above, I guess I have to add my own answer.

drcforbin is correct, although it is really a different problem than the one that the OP had. Anyone coming to this thread now is probably facing this issue due to the new version of jQuery UI just released. Certain naming conventions relating to autocomplete were deprecated in jQuery UI in v1.9 and have been completely removed in v1.10 (see http://jqueryui.com/upgrade-guide/1.10/#autocomplete).

What is confusing, however, is that they only mention the transition from the item.autocomplete data tag to ui-autocomplete-item, but the autocomplete data tag has also been renamed to ui-autocomplete. And it's even more confusing because the demos are still using the old syntax (and thus are broken).

The following is what needs to change in the _renderItem function for jQuery UI 1.10.0 in the Custom Data demo here: http://jqueryui.com/autocomplete/#custom-data

Original code:

.data( "autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "item.autocomplete", item )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};

Fixed code:

.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "ui-autocomplete-item", item )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};

Note the changes for both autocomplete and item.autocomplete. I've verified that this works in my own projects.

Kktp

This has changed again at least with 1.12 it's now .autocomplete( "instance" ) --- See Latest: jqueryui.com/autocomplete/#custom-data) – Explicable

In later versions of jquery-ui, for widgets with a custom autocomplete base, if have something like $el.data('ui-autocomplete', autocomplete), use var autocomplete = this.element.data('mynamespace-myautocomplete') instead of this.element.data('myautocomplete'). Not doing so will cause it to spit out the same _renderItem error (very confusing). – Sixtyfourmo

Answer 2

I ran into the same problem...seems in later versions, it has to be .data("ui-autocomplete") instead of .data("autocomplete")

Sagittate

I don't see the difference – Drummond

Answer 3

I know I'm late with my answer but if people in the future still don't get

 .data( "ui-autocomplete-item", item )

to work then try this insted

$(document).ready(function(){
 $('#search-id').autocomplete({
  source:"search.php",
  minLength:1,       
  create: function () {
   $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
      return $('<li>')
        .append( "<a>" + item.value + ' | ' + item.label + "</a>" )
        .appendTo(ul);
    };
  }
 })
});

It worked for me and I was having problem with the login funktion.. I could not login because it said

Uncaught TypeError: Cannot set property '_renderItem' of undefined 

Hope this does help someone :)

/kahin

Burdened

Answer 4

I'm using jquery 1.10.2 and it work using:

.data( "custom-catcomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "ui-autocomplete-item", item )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};

Sonja

Answer 5

And now, with jQuery-2.0.0, it's the name of your new module, but replacing the "." (dot) by the "-" (dash) :

jQuery.widget ('custom.catcomplete', jQuery.ui.autocomplete, {
    '_renderMenu': function (ul, items) {
        // some work here
    }
});

$this.catcomplete({
    // options
}).data('custom-catcomplete')._renderItem = function (ul, item) {}

Amid

Answer 6

Posting for the sake of any person who stumbles across this post.

This error will also manifest itself if you don't put the .autocomplete inside the document ready event.

The code below will fail:

<script type="text/javascript">
    $('#msg-to').autocomplete({
        source:all_friends,
        select:function (event, ui) {               
            // set the id of the user to send a message to
            mail_message_to_id = ui.item.id;
        }

    }).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append($("<a></a>").html(item.label))
            .appendTo(ul);
    };
</script>

while the code below will work:

<script type="text/javascript">
    $(function(){
        $('#msg-to').autocomplete({
            source:all_friends,
            select:function (event, ui) {               
                // set the id of the user to send a message to
                mail_message_to_id = ui.item.id;
            }

        }).data("autocomplete")._renderItem = function (ul, item) {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append($("<a></a>").html(item.label))
                .appendTo(ul);
        };
    });
</script>

Mezzanine

this was the cause of my "Cannot set property '_renderItem' of undefined" inside a Jasmine spec – Cool

Answer 7

Depending on the version of jquery ui you're using it will either be "autocomplete" or "ui-autocomplete", I made this update to the combobox plugin to fix the problem (~ln 78-85)

var autoComplete = input.data("ui-autocomplete");
if(typeof(autoComplete) == "undefined")
     autoComplete = input.data("autocomplete");

autoComplete._renderItem = function(ul, item) {

...

Gastrostomy