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.

Yes there is...$("#msg-to") is a text input field, that the .autocomplete is binding to. — Carl Weis, Mar 02 '12 at 01:49
this helped: http://stackoverflow.com/questions/5590776/why-am-i-getting-this-js-error — Ilmars, May 31 '12 at 07:43
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. — Eric Belair, Feb 28 '14 at 18:24

score 203 · Accepted Answer · edited Aug 26 '13 at 15:48

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.

This has changed again at least with 1.12 it's now .autocomplete( "instance" ) --- See Latest: https://jqueryui.com/autocomplete/#custom-data) — LoJo, Mar 02 '17 at 04:16
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). — Aralox, Mar 16 '21 at 23:13

score 26 · Answer 2 · edited Jan 20 '13 at 22:17

26

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

edited Jan 20 '13 at 22:17

István Ujj-Mészáros

3,228
1
27
46

answered Jan 20 '13 at 04:11

drcforbin

260
3
5

2

I don't see the difference – mac10688 Jan 20 '13 at 04:18

Kahin · Answer 3 · 2016-01-06T10:31:31.270

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

score 6 · Answer 4 · answered Apr 03 '13 at 13:57

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

score 5 · Answer 5 · answered Apr 25 '13 at 08:58

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

score 3 · Answer 6 · answered Jul 18 '13 at 22:37

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>

this was the cause of my "Cannot set property '_renderItem' of undefined" inside a Jasmine spec — k s, Mar 21 '14 at 19:41

Michael Angstadt · Answer 7 · 2013-02-08T20:01:41.473

1

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) {

...

edited Feb 08 '13 at 20:01

answered Feb 08 '13 at 19:55

Michael Angstadt

76
1
2

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

7 Answers7

Linked