将项目附加到 jQuery UI 自动完成

Question

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

一切正常，除了我想在列表末尾附加一个项目，上面写着：“找不到项目？单击此处请求添加新项目。”

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

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 event 触发后添加额外的条目。这将使您能够访问列表，这是您所追求的，而不是访问每个元素，这是 _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；它为建议列表中的每个项目调用一次。

你想要做的是猴子补丁 _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 之后，修补此以添加您的额外项目。