我一直在努力让 jQuery UI 自动完成功能输出自定义 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 输出正是我想要的。但是，当我“按下”时，出现 javascript 错误(项目未定义)。

有什么想法或建议吗？我几乎什么都试过了。

最佳答案

你快到了!我只做了两处更改来让它工作(根据 OP 的评论更新):

在深入研究 jQueryUI 自动完成源代码后，自动完成小部件使用的底层菜单似乎对嵌套元素不太友好。

我可能错了，但我认为菜单需要一个简单的 <ul>带着 child <li> s 包含 anchor 标记。

编辑:这一行证实了我对菜单的怀疑(在 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 在语义上或视觉上都没有错误如果是不同的类，我会像这样重构小部件的菜单:

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在li里面每个类别的 s。如果出于某种原因更改生成的菜单的 HTML 不适合您，请告诉我。

我更新了示例:http://jsfiddle.net/andrewwhitaker/pjs7a/2/

希望对您有所帮助。

关于javascript - Jquery UI 自动完成自定义 HTML(项目未定义)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4908216/