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


70

我正在使用以下代码将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绑定到的文本输入字段。
卡尔·威斯


1
仅供参考,对于使用_renderItem()方法填充原始UL以外的其他内容(即SELECT OPTION)的任何人,我只能通过在填充其他对象之后返回LI(如上所述)来使其正常工作。
埃里克·贝莱尔

Answers:


201

由于我只是加入而不能在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 );
};

注意autocompleteitem.autocomplete的更改。我已经证实这可以在我自己的项目中使用。


5
这至少又变与1.12它现在.autocomplete(“实例”)---见最新:jqueryui.com/autocomplete/#custom-data
LoJo

26

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


2
我看不出有什么区别
mac10688

10

我知道我的回答迟到了,但如果将来的人们仍然听不懂

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

它对我有用,我在登录功能上遇到了问题。我无法登录,因为它说

未捕获的TypeError:无法设置未定义的属性'_renderItem' 

希望这对某人有所帮助:)

/ kahin


6

我正在使用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) {}

3

为任何偶然发现此帖子的人而发布。

如果您不将.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'的原因”的原因
ks

1

根据您使用的jQuery UI的版本,它是“自动完成”还是“ ui-自动完成”,我对combobox插件进行了此更新以解决此问题(〜ln 78-85)

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

autoComplete._renderItem = function(ul, item) {

...

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.