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

Posted 2023-05-08

【中文标题】无法使用 HTML 设置未定义的 jQuery UI 自动完成的属性“_renderItem”

【英文标题】：Cannot set property '_renderItem' of undefined jQuery UI autocomplete with HTML

【发布时间】：2012-03-19 18:33:08

【问题描述】：

我正在使用以下代码将我的 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);
    ;
);

不知道为什么它会抛出这个错误，或者我必须做些什么才能克服它......感谢任何帮助。

【问题讨论】：

页面上是否有ID为#msg-to的元素？

是的...$("#msg-to") 是一个文本输入字段，.autocomplete 绑定到该字段。

这有帮助：***.com/questions/5590776/…

仅供参考，对于使用 _renderItem() 方法填充原始 UL 以外的其他内容（即 SELECT OPTION）的任何人，我只能通过在其他对象已填充。

【参考方案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 的转换，而 autocomplete 数据标签也已重命名为 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 );
;

注意 autocomplete 和 item.autocomplete 的变化。我已经验证这在我自己的项目中有效。

【讨论】：

这至少在 1.12 中再次发生了变化，现在是 .autocomplete("instance") --- 查看最新：jqueryui.com/autocomplete/#custom-data)

在 jquery-ui 的更高版本中，对于具有自定义自动完成基础的小部件，如果有类似 $el.data('ui-autocomplete', autocomplete) 的内容，请使用 var autocomplete = this.element.data('mynamespace-myautocomplete') 而不是 this.element.data('myautocomplete')。不这样做会导致它吐出相同的_renderItem 错误（非常混乱）。

【参考方案2】：

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

【讨论】：

我看不出区别

【参考方案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);
    ;
  
 )
);

它对我有用，但我的登录功能有问题。我无法登录，因为它说

未捕获的类型错误：无法设置未定义的属性“_renderItem”

希望这对某人有帮助:)

/卡欣

【参考方案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 );
;

【参考方案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) 

【参考方案6】：

为了任何偶然发现这篇文章的人而发帖。

如果您不将 .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>

【讨论】：

这是我在 Jasmine 规范中“无法设置未定义的属性 '_renderItem'”的原因

【参考方案7】：

根据您使用的 jquery ui 版本，它将是“自动完成”或“ui-autocomplete”，我对组合框插件进行了此更新以解决问题 (~ln 78-85)

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

autoComplete._renderItem = function(ul, item) 

...