无法使用HTML设置未定义的jQuery UI自动完成的属性'_renderItem'

Question

我正在使用以下代码将我的jQuery UI自动完成项呈现为HTML.这些项在自动完成控件中正确呈现,但我一直收到此javascript错误,无法移动它.

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

不知道为什么它会抛出这个错误,或者我必须做些什么才能超越它......任何帮助都表示赞赏.

Answer 1

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

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

然而,令人困惑的是,他们只提到了从item.autocomplete数据标记到ui-autocomplete-item的转换,但自动完成数据标记也已重命名为ui-autocomplete.而且它更令人困惑,因为演示仍在使用旧语法(因而被破坏).

以下是需要在自定义数据演示中的jQuery UI 1.10.0的_renderItem函数中进行更改的内容: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的更改.我已经证实这适用于我自己的项目.

Answer 2

我遇到了同样的问题......似乎在以后的版本中,它必须.data("ui-autocomplete")代替.data("autocomplete")

Answer 3

我知道我的回答迟到了,但是如果将来的人还没有得到

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

工作然后尝试这个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);
    };
  }
 })
});

它对我有用,我遇到登录funktion的问题..我无法登录,因为它说

Uncaught TypeError: Cannot set property '_renderItem' of undefined 

希望这确实有助于某人:)

/卡欣

Answer 4

我正在使用jquery 1.10.2,它使用:

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

Answer 5

现在,使用jQuery-2.0.0,它是新模块的名称,但替换了".".(点)由" - "(短划线):

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

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