jquery - JQuery UI 自动完成插件中的分组结果？

Question

我正在尝试创建一些跨多种类型数据的搜索功能，并具有自动完成功能。我希望为每个自动完成建议以及根据类型分组的建议提供自定义 View 。各组也应该分开。

如果我的解释不太清楚，您可以查看 Hotels.com 上的搜索功能作为示例:建议根据城市、地标、机场等进行分组。

我一直在研究 JQuery UI 自动完成插件，它似乎能够完成我需要的大部分操作，但我还没有看到任何分组的示例。

由于我的 javascript/JQuery 技能有点缺乏，我希望这里有人能告诉我是否可以实现我想要的自动完成插件，或者是否有其他插件可以实现这一点？如果有一个关于如何完成此操作的示例/概述，我们也将不胜感激。

Answer 1

您可以通过更改默认的 _renderMenu 函数来覆盖自动完成呈现的方式。我做了一些类似于你所说的事情，(1)返回按类别排序的 json 结果，(2)覆盖这个函数。没有代码可以专门帮助您，但这是我自己的代码的示例

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