首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >无法使用HTML设置未定义的jQuery UI autocomplete的属性'_renderItem‘

无法使用HTML设置未定义的jQuery UI autocomplete的属性'_renderItem‘
EN

Stack Overflow用户
提问于 2012-03-01 16:57:35
回答 6查看 70.1K关注 0票数 72

我使用以下代码将我的HTML自动完成项呈现为jQuery。项目在自动完成控件中正确呈现,但我一直收到这个javascript错误,无法跳过它。

Firefox 无法转换JavaScript参数

Chrome 无法设置未定义的属性“”_renderItem“”

代码语言:javascript
复制
  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);
    };
});

不知道它为什么抛出这个错误,或者我必须做什么才能通过it...Any帮助,我很感激。

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2013-01-22 01:21:53

由于我刚加入,不能评论drcforbin上面的帖子,我想我必须添加我自己的答案。

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

然而,令人困惑的是,他们只提到了从item.autocomplete数据标记到ui-autocomplete-item,的转换,而autocomplete数据标记也被重命名为ui-autocomplete.这甚至更令人困惑,因为演示仍然在使用旧的语法(因此是坏的)。

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

原始代码:

代码语言:javascript
复制
.data( "autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "item.autocomplete", item )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};

修复代码:

代码语言:javascript
复制
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "ui-autocomplete-item", item )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};

请注意autocompleteitem.autocomplete.的更改我已经验证了这在我自己的项目中是有效的。

票数 204
EN

Stack Overflow用户

发布于 2013-01-20 12:11:21

我在以后的版本中遇到了相同的problem...seems,它必须是.data("ui-autocomplete")而不是.data("autocomplete")

票数 26
EN

Stack Overflow用户

发布于 2013-04-03 21:57:31

我使用的是jquery 1.10.2,它的工作原理是:

代码语言:javascript
复制
.data( "custom-catcomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "ui-autocomplete-item", item )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};
票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9513251

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档