jQuery UI自动完成类别如何跳过类别标题

Question

我在我的网络应用程序中有一个工作自动完成字段,我正在寻找一种方法来增加字段的可用性,当使用箭头键向下滚动可用选项时(在输入后)以某种方式自动跳过类别字段部分搜索词).

例如,如果用户开始键入"an",则自动完成将显示两个类别,每个类别中包含项目.用户想要在"人物"下选择列表中的一个项目.他们使用箭头键向下移动列表.目前,此代码将结果中的类别作为列表项插入.使用箭头键时,必须移动它们才能突出显示并选择结果.应用程序可以自动跳过这些类别标题吗？

$.widget( "custom.catcomplete", $.ui.autocomplete, {
        _renderMenu: function( ul, items ) {
            var self = this,
                currentCategory = "";
            $.each( items, function( index, item ) {
                if ( item.category != currentCategory ) {
                    ul.append( "<li class='ui-menu-item ui-category'>" + item.category + "</li>" );
                    currentCategory = item.category;
                }
                self._renderItem( ul, item );
            });
        }
    });

    var data = [
        { label: "annk K12", category: "Products" },
        { label: "annttop C13", category: "Products" },
        { label: "anders andersson", category: "People" },
        { label: "andreas andersson", category: "People" },
        { label: "andreas johnson", category: "People" }
    ];

    $( "#textfield" ).catcomplete({
        source: data,
        select: function(event, ui) {
            window.location.hash = "id_"+escape(ui.item.id);
        }
    });

Answer 1

这一行:

ul.append( "<li class='ui-menu-item ui-category'>" + item.category + "</li>" );

造成了这个问题.

在内部,窗口小部件使用带有类的列表项ui-menu-item来区分是否li是可以选择的实际菜单项.当您按下"向下"键时,窗口小部件会找到带有类的下一个项目ui-menu-item并移动到该项目.

删除类,您的代码就像您希望的那样:

ul.append( "<li class='ui-category'>" + item.category + "</li>" );

这是工作:

http://jsfiddle.net/andrewwhitaker/pkFCF/