Группировать результаты в плагине JQuery UI Autocomplete?

Question

Я пытаюсь создать некоторые функции поиска по нескольким типам данных с автозаполнением. Я предпочел бы иметь собственные представления для каждого предложения автозаполнения, а также для предложений, которые будут сгруппированы по типу. Группы также должны быть разделены.

Если мое объяснение плохое, вы можете увидеть функцию поиска на hotels.com для примера: предложения сгруппированы по городу, достопримечательностям, аэропортам и т. Д.

Я смотрел на плагин JQuery UI Autocomplete, и он, кажется, в состоянии сделать большую часть того, что мне нужно, но я не видел ни одного примера группировки.

Так как мои навыки 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 );
            });
        }
    });

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" />

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

Answer 4

И кроме того, вы можете заменить:

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

с:

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

в противном случае вы увидите много ошибок в консоли, например: n не определено или элемент не определен ...