Jquery UI自動完成自定義HTML（項目未定義）

Question

我一直在試圖讓jQuery UI Autocomplete輸出自定義HTML。 這是我的代碼。

        $(document).ready(function(){

        $.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-autocomplete-category'>" + item.category + "<ul class='autocomplete-category'></ul></li>" );
                        currentCategory = item.category;
                    }
                    self._renderItem( ul, item);
                });
            }
        });

        var data = [
            { label: "anders", category: "Antigen" },
            { label: "andreas", category: "Antigen" },
            { label: "antal", category: "Antigen" },
            { label: "annhhx10", category: "Products" },
            { 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" }
        ];

        $( "#typeAhead" ).catcomplete({
            delay: 0,
            source: data,
        })
        .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'));
        };
    });

我似乎通過在renderItem函數中嵌套我的列表而遇到麻煩。 HTML輸出正是我想要的。 但是，當我“keydown”時，我得到一個javascript錯誤（項目未定義）。

任何想法或建議？ 我已經嘗試了一切。

Answer 1

你快到了！ 我只進行了兩次更改才能使其工作（ 在OP發表評論后更新 ）：

在深入研究jQueryUI自動完成源之后，看起來自動完成小部件使用的底層菜單對嵌套元素不太友好。

我可能錯了，但我認為菜單需要一個簡單的<ul> ，只有子<li>包含一個錨標記。

編輯 ：這一行證實了我對菜單的懷疑（在jqueryUI 1.8.9的菜單小部件中找到）：

    var items = this.element.children("li:not(.ui-menu-item):has(a)")
        .addClass("ui-menu-item")
        .attr("role", "menuitem");

    items.children("a")
        .addClass("ui-corner-all")
        .attr("tabindex", -1)
        // mouseenter doesn't work with event delegation
        .mouseenter(function( event ) {
            self.activate( event, $(this).parent() );
        })
        .mouseleave(function() {
            self.deactivate();
        });

基本上，由於您a標簽被隱藏在嵌套列表中，因此菜單無法識別它們。

我打賭你注意到你的原始代碼中你的自動完成菜單項沒有突出顯示你的鼠標。 此突出顯示實際上與窗口小部件認為處於活動狀態的菜單項一致，這導致窗口小部件在用戶選擇項目時失敗。

由於沒有什么錯語義或視覺錯只是給該類別li SA不同的階級，我會重組這樣的小部件菜單：

JavaScript的：

_renderItem函數：

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

你的_renderMenu函數：

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

為自動完成菜單生成的HTML：

<ul class="ui-autocomplete>
    <li class="ui-autocomplete-category">Antigen</li>
    <li class="ui-menu-item" role="menuitem">
         <a class="ui-menu-item ui-corner-all" tabindex="-1">anders</a>
    </li>
    <li class="ui-menu-item" role="menuitem">
        <a class="ui-menu-item ui-corner-all" tabindex="-1">andreas</a>
    </li>
    <li class="ui-menu-item" role="menuitem">
        <a class="ui-menu-item ui-corner-all" tabindex="-1">antal</a>
    </li>
    <!-- More categories, items, etc.-->
</ul>

通過您的意見來看，這似乎是你想要的菜單的HTML是嵌套ul S的內li S代表每個類別。 如果由於某種原因更改生成的菜單的HTML不是您的選項，請告訴我。

我已經更新了這個例子： http ： //jsfiddle.net/andrewwhitaker/pjs7a/2/

希望有所幫助。