用户界面——向jQuery UI自动完成添加一个项

Question

目前，我在引用ASHX文件的文本框上使用jQuery UI自动完成。

一切正常，除了我想在列表的末尾添加一个项目:"item not found?"点击这里请求添加新项目。"

我尝试了下面的代码行，但它所做的只是格式化项目，我无法追加。

data( "catcomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.catcomplete", item )
            .append( $( "<a class='ui-menu-item'></a>" ).text( item.label ) )
            .appendTo( $('ul').last('.autocomplete-category'));
    };

提示?提示?你不断地忙碌着,谢谢!: D

Answer 1

应该在Open事件触发后添加额外的条目。这将使您能够访问列表，而不是访问每个元素，这是_renderItem允许您访问的。

下面是一个样式化已填充到列表中的条目的示例:

$("#myBox").autocomplete({
        source: "[URL]",
        minLength: 2,
        open: function(event, ui) {
            $("ul.ui-autocomplete.ui-menu .ui-menu-item:odd").css("background-color","#dedede");
        }
    });

Answer 2

你不想摆弄_renderItem。这是呈现一个项目的fn;对于建议列表中的每个项目调用一次。

你要做的是monkeypatch _renderMenu函数。jQuery UI 1.8.6中最初的定义是这样的:

_renderMenu: function( ul, items ) {
    var self = this;
    $.each( items, function( index, item ) {
        self._renderItem( ul, item );
    });
},

对于其他版本的jQuery UI可能基本相同。

在做$.each之后，修补这个以添加您的额外项目。