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 as for the suggestions to be grouped according to type. The groups should also be separated.

If my explanation is poor, you can see the search functionality on hotels.com for an example: The suggestions are grouped according to city, landmarks, airports etc.

I’ve been looking at the JQuery UI Autocomplete plugin, and it seems to be able to do most of what I need, but I have not seen any example of the grouping.

Since my javascript/JQuery skills are a bit lacking, I’m hoping someone here could tell me whether it is possible to achieve what I want Autocomplete plugin, or if there’s some other plugin that might do the trick? An example/outline of how it can be done would also be greatly appreciated.

Answer 1

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