How to use multiple autocomplete with categories in same page.

How to use multiple autocomplete with categories in same page.

Hi,

Need to implement multiple auto-complete with categories in same page. I have implemented single auto-complete with categories.. Please guide me solve this issue..

This is my code,
  1. $.widget( "custom.autocomplete", $.ui.autocomplete, {
    _create: function() {
    this._super();
    this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
    },
    _renderMenu: function( ul, items ) {
    var that = this,
    currentCategory = "";
    ul.append('<li class="ui-autocomplete-category" style="background-color: #eee;padding: 10px;text-align: center;">Suggested Products</li>');
    $.each( items, function( index, item ) {
    var li;
    if ( item.category != currentCategory ) {
    ul.append( "<li class='ui-autocomplete-category' style='padding: 10px;'>" + item.category + "</li>" );
    currentCategory = item.category;
    }
    li = that._renderItemData( ul, item );
    if ( item.category ) {
    li.attr( "aria-label", item.category + " : " + item.label );
    li.html('<a><div class="list_item_container"><div class="image"><img width="60" height="45" src="/images/image.png">' + item.label + '</div></div></a>');
    }
    });
    ul.append('<button type="submit" style="margin: 15px;" class="btn btn-primary pull-right test123 ui-autocomplete-category">View more</button>');
    }
    });
  1. $('#search').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/search_content",
                        data: { searchText: request.term, maxResults: 10 },
                        dataType: "json",
                        success: function (data) {

                            response($.map(data, function (item) {
                                return {
                                    value: item.DisplayName,
                                    avatar: item.PicLocation,
                                    rep: item.Reputation,
                                    selectedId: item.UserUniqueid,
                                    category: item.category
                                };
                            }))
                        }
                    })
                },
                select: function (event, ui) {
                                     alert(ui.item ? ("You picked '" + ui.item.label)
                                                              : "Nothing selected, input was " + this.value);
                    return false;
                },
            });
In above code, widget is used to separate the categories.. But need to use the widget based on input id..


I need to use two auto-complete input, each should display the data in different formats.

Thanks,

Premkumar m