无法使用 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 的转换，但是 autocomplete 数据标记也已重命名为 ui-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).

以下是此处的自定义数据演示中 jQuery UI 1.10.0 的 _renderItem 函数中需要更改的内容: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的变化.我已经验证这在我自己的项目中有效.

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

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