无法使用HTML设置未定义的jQuery UI自动完成的属性'_renderItem' [英] Cannot set property '_renderItem' of undefined jQuery UI autocomplete with HTML

问题描述

我正在使用以下代码将我的jQuery UI自动完成项呈现为HTML。
项目在自动完成控件中正确呈现，但我不断收到此javascript错误，无法移动它。

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 无法转换JavaScript参数

Chrome 无法设置属性'_renderItem'未定义

  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.

推荐答案

由于我刚加入并且无法评论 drcforbin 上面的帖子，我猜我必须添加自己的答案。

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

drcforbin 是正确的，尽管它实际上与OP的问题不同。由于刚刚发布的新版jQuery UI，现在有人来到这个线程可能正面临这个问题。某些与自动完成相关的命名约定在v1.9的jQuery UI中已弃用，并已在v1.10中完全删除（请参阅 http://jqueryui.com/upgrade-guide/1.10/#autocomplete ）。

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

但令人困惑的是，他们是仅提及从 item.autocomplete 数据标记到 ui-autocomplete-item 的转换，但自动填充数据标记也已重命名为<强> UI-自动完成即可。而且它更令人困惑，因为演示仍然使用旧的语法（因此被破坏）。

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

以下是jQuery UI的_renderItem函数需要更改的内容1.10.0在此处的自定义数据演示中： http://jqueryui.com/autocomplete/#custom-data

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

原始代码：

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

固定代码：

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

请注意自动填充和 item.autocomplete <的更改/ strong>即可。我已经证实这适用于我自己的项目。

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

这篇关于无法使用HTML设置未定义的jQuery UI自动完成的属性'_renderItem'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！