将结果分组到JQuery UI Autocomplete插件？

Question

我正在尝试使用自动完成功能在多种类型的数据中创建一些搜索功能.我更希望为每个自动填充建议提供自定义视图,以及根据类型对建议进行分组.这些小组也应该分开.

如果我的解释很差,您可以在hotels.com上看到搜索功能的示例:建议根据城市,地标,机场等进行分组.

我一直在关注JQuery UI Autocomplete插件,它似乎能够完成我需要的大部分工作,但我还没有看到任何分组的例子.

由于我的javascript/JQuery技能有点缺乏,我希望有人可以告诉我是否有可能实现我想要的Autocomplete插件,或者是否有其他插件可以做到这一点？还将非常感谢如何完成它的示例/概述.

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 );
            });
        }
    });

Answer 2

我尝试了上述答案。然而，一个问题是如果类别没有排序，例如

var availableTags = [
        {category: "favourite", label: "c#",         value: "c#", },
        {category: "other",     label: "Java",       value: "Java"},
        {category: "favourite", label: "JavaScript", value: "JavaScript"},
        {category: "other",     label: "J#",         value: "J#"},
    ];

它将创建重复的“收藏夹”和“其他”类别。

这是我为 jquery ui 自动完成分组创建的一个工作演示。即使它们的类别未按排序顺序，这也可以对项目进行分类。

http://jsfiddle.net/jooooice/qua87frd/

var availableTags = [
        {category: "favourite", label: "c#",         value: "c#", },
        {category: "other",     label: "Java",       value: "Java"},
        {category: "favourite", label: "JavaScript", value: "JavaScript"},
        {category: "other",     label: "J#",         value: "J#"},
    ];

$(function(){
    
    var availableTags = [
        {category: "favourite", label: "c#",         value: "c#", },
        {category: "other",     label: "c++",        value: "c++"},
        {category: "other",     label: "c",          value: "c"},
        {category: "other",     label: "Java",       value: "Java"},
        {category: "favourite", label: "JavaScript", value: "JavaScript"},
        {category: "other",     label: "J#",         value: "J#"},
    ];
        
    var customRenderMenu = function(ul, items){
        var self = this;
        var categoryArr = [];
        
        function contain(item, array) {
            var contains = false;
            $.each(array, function (index, value) {
                if (item == value) {
                    contains = true;
                    return false;
                }
            });
            return contains;
        }
        
        $.each(items, function (index, item) {
            if (! contain(item.category, categoryArr)) {
                categoryArr.push(item.category);
            }
            console.log(categoryArr);
        });
        
        $.each(categoryArr, function (index, category) {
            ul.append("<li class='ui-autocomplete-group'>" + category + "</li>");
            $.each(items, function (index, item) {
                if (item.category == category) {
                    self._renderItemData(ul, item);
                }
            });
        });
    };
        
    $("#tags").tagit({
        autocomplete: {
            source: availableTags,
            create: function () {
                //access to jQuery Autocomplete widget differs depending 
                //on jQuery UI version - you can also try .data('autocomplete')
                $(this).data('uiAutocomplete')._renderMenu = customRenderMenu;
            }
        }
    })
});

.ui-autocomplete-group {
    line-height: 30px;
    background-color: #aaa;
}
.ui-menu-item {
    padding-left: 10px;
}