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

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

Firefox 无法转换 JavaScript 参数

铬 无法设置未定义的属性“ _ 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);
};
});

不知道它为什么要抛出这个错误，或者我必须做什么来克服它... 任何帮助都是感激的。

73060 次浏览
小开

我遇到了同样的问题... 似乎在后来的版本，它必须是 .data("ui-autocomplete")而不是 .data("autocomplete")

小开
最佳答案

因为我刚刚加入，不能评论 Cforbin 医生上面的帖子，我想我必须添加我自己的答案。

Drcforbin 是正确的，尽管它确实与 OP 的问题不同。由于刚刚发布了新版本的 jQuery UI，现在任何参与这个线程的人都可能面临这个问题。在1.9版本的 jQuery UI 中，与自动补全相关的某些命名约定已被废弃，在1.10版本中已被完全删除(参见 http://jqueryui.com/upgrade-guide/1.10/#autocomplete)。

然而，令人困惑的是，它们只提到从 项目，自动完成数据标记到 自动完成项目的转换，但是 自动补全数据标记也被重命名为 自动完成。更令人困惑的是，演示仍然使用旧的语法(因此是破碎的)。

下面是在 Custom Data demo here 中 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 );
};

请注意 自动补全和 项目，自动完成的变化。我已经在我自己的项目中验证了这一点。

小开

根据您使用的 jquery ui 的版本，它可以是“ autocomplete”或“ ui-autocomplete”，我对 combobox 插件做了这个更新以修复这个问题(~ ln 78-85)

var autoComplete = input.data("ui-autocomplete");
if(typeof(autoComplete) == "undefined")
autoComplete = input.data("autocomplete");


autoComplete._renderItem = function(ul, item) {

...

小开

我使用的是 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 );
};
小开

现在，在 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) {}
小开

为了任何偶然发现这个帖子的人而发帖。

如果您没有将. autocomplete 放在文档就绪事件中，这个错误也会显示出来。

以下代码将会失败:

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

下面的代码可以正常工作:

<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>
小开

我知道我迟到了，但是如果未来的人们还是不明白

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

工作，然后尝试这个安装

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

它为我工作，我是有问题的登录功能. . 我不能登录，因为它说

Uncaught TypeError: Cannot set property '_renderItem' of undefined

希望这对某人有帮助:)

卡辛


提交答案