JQuery UI Autocomplete插件中的分组结果？

Question

我正在尝试创建跨多种数据类型的搜索功能，并带有自动完成。我希望每个自动完成建议都有自定义视图，并按类型分组。这些组也应该被分开。

如果我的解释不够清晰，您可以在hotels.com上查看搜索功能的示例：建议根据城市、地标、机场等分组。

我一直在研究JQuery UI Autocomplete插件，它似乎能够满足我大部分需求，但我没有看到任何关于分组的示例。

由于我的javascript / JQuery技能有点欠缺，我希望这里的某个人告诉我是否可能通过Autocomplete插件实现我想要的内容，或者是否有其他插件可以胜任？如何实现的示例/概述也将不胜感激。

- rogerkk

---

自动完成类别的示例听起来与您所描述的相似：http://jqueryui.com/demos/autocomplete/#categories 查看源代码以了解他们如何设置示例。如果您正在从数据库中获取数据，只需将“category”变量添加到返回的结果中即可。然后，使用natedavisolds的示例即可获得所需的其余内容。 - jk.

啊。虽然看起来不像，但我一直在浏览演示，显然错过了那个。谢谢！ - rogerkk

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

- natedavisolds

---

谢谢您的回答，您有没有想法如何找出所选建议的类别？请看一下我的问题https://dev59.com/cY_ea4cB1Zd3GeqPLDEs - Jack

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/

$(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;
}

<input id="tags" type="text" />

- JoyceJi

Answer 3

这是由@natedavisolds提供的已被接受的答案，更新后可与Jquery UI 1.10一同使用。

  $.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
      var that = this;
      var currentCategory = "";
      $.each( items, function( index, item ) {
        if (item.category != currentCategory) {
          $('<li/>').addClass('ui-autocomplete-category').html(convert_category(item.category)).appendTo(ul);
          currentCategory = item.category;
        }
        that._renderItemData( ul, item );
      });
    }   
  });

- Stephen

---

函数 convert_category() 是做什么的？ - Weinz

Answer 4

此外，您还可以替换：

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

使用：

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

否则，您将在控制台中看到许多错误，例如：“n未定义”或“item未定义”...

- the_root