Grouping results in JQuery UI Autocomplete plugin?

Question

I\'m trying to create some search functionality across several types of data, with autocomplete. I\'d prefer to have custom views for each autocomplete suggestion, as well a

Answer 1

And in addition, you may replace:

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

with:

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

otherwise you will see many errors in the console, like: n is undefined, or item is undefined...

Answer 2

I tried the above answers. However, one problem is that if the category is not ordered, e.g.

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#"},
    ];

it will create duplicates "favourite" and "other" category.

Here is a working demo I created for jquery ui autocomplete grouping. This can categorize items even when their categories are not in sorted order.

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

You can overwrite the way that autocomplete renders by changing the default _renderMenu function. I did something similar to what you are talking about by (1) returning the json results sorted by category and (2) overwriting this function. No code to help you specifically but here is an example from my own code

$.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 4

This is the accepted answer by @natedavisolds updated for use with 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 );
      });
    }   
  });