Question

我正在使用Jquery-ui版本1.10.3和jQuery 1.8.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'等组合，但到目前为止还没有一个在这方面有效，有些甚至都没能完成菜单填写。

任何提示都会很棒。

Answer 1

好的，终于找到了问题。有必要在

元素上添加一个'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 );
};

Answer 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变体。

JQueryUI自动完成 - 自定义渲染;专注不工作

2 个答案: