5

我正在使用带有 jQ​​uery 1.8.3 的 Jquery-ui 版本 1.10.3 并尝试实现自动完成服务器获取的数据的自定义显示：

这是渲染覆盖的部分：

$(#"...").autocomplete(...)
 .data( "ui-autocomplete")._renderItemData = function( ul, item : Users.BriefUserDescriptor) {
    ul.data('ui-autocomplete-item', item);
    return $( "<li>" )
        .data('ui-autocomplete-item', item )
        .append( "<p>" + item.fullName + "<br>" + item.emailAddress+ "</p>" )
        .appendTo( ul );
};

这行得通。元素按我想要的方式显示，除了关于焦点的问题：

focus: function( event, ui) {
            var currentUser : Users.BriefUserDescriptor = ui.item;
            $("#invitePersonInput" ).val(currentUser.fullName);
            return false;
        },

这总是会触发错误，即 currentUser (ui.item) 未定义。

我已经尝试了 'ui-autocomplete-item'、'uiAutocomplete' 等的几种组合，但到目前为止没有一个在这方面起作用，有些甚至完全没有完成菜单填写。

任何提示都会很棒。

4

2 回答 2

8

好的，终于找到问题了。有必要添加一个“ui-menu-item”类

  • 元素，否则 JQuery 无法正确选择该项目并将其移交给处理程序函数。

    覆盖 renderItem 而不是 renderItemData 似乎也是正确的方法。

    它应该看起来像：

    $(#"...").autocomplete(...)
 .data( "ui-autocomplete")._renderItemData = function( ul, item : Users.BriefUserDescriptor) {
    ul.data('ui-autocomplete-item', item);
    return $( "<li>" )
        .data('ui-autocomplete-item', item )
        .append( "<p>" + item.fullName + "<br>" + item.emailAddress+ "</p>" )
        .addClass('ui-menu-item')
        .appendTo( ul );
};
    • 于 2013-07-29T10:34:01.533 回答
    2

    感谢您提供此信息，它帮助我解决了我的 ui 未定义的类似问题。对我来说，问题在于

    _renderItem: function (ul, item, url) {
        return $('<li>')
            .data('item.autocomplete', url)

    至

    _renderItem: function (ul, item, url) {
        return $('<li>')
            .data('ui-autocomplete-item', url)

    我正在将 jquery 1.9.1 脚本转换为 jquery-ui 1.10.4 变体。

    于 2014-03-13T05:27:49.287 回答