How to provide multiple source parameters in jquery autocomplete plugin?

Autocomplete is working fine and it provides me 15 records as needed. But my problem is I want to show 5 records from users, 5 records from products and 5 from recently searched strings/queries. I am sending all those results in json back from my php script and then I am using that json (converting in to jquery object) as my source. Here my code looks like:

jQuery(document).ready(function(e){
var total_users     = scripts_child_vars_json.users;    
var users           = jQuery.parseJSON(total_users);
var users_list      = new Array();
jQuery.each(users, function(index, item) {        
    users_list.push({label: item.label, link: item.link, type: item.type});        
});

jQuery(".sp-form-search input:first-child").autocomplete({                
    source: function(request, response) {
        highlightClass: "bold-text";
        var results = jQuery.ui.autocomplete.filter(users_list, request.term);          
        response(results.slice(0, 15));                    
        jQuery('<li class="ui-menu-item li-disabled">SERVICES</li>').insertBefore('.service-li:first');   
        jQuery('<li class="ui-menu-item li-disabled">USERS</li>').insertBefore('.user-li:first');           
        jQuery('<li class="ui-menu-item li-disabled">MOST SEARCHED</li>').insertBefore('.recent-li:first');         
        //dirty hack

        jQuery('.service-li').hide();
        jQuery('.service-li:lt(5)').show();
        jQuery('.user-li').hide();      
        jQuery('.user-li:lt(5)').show();
        jQuery('.recent-li').hide();    
        jQuery('.recent-li:lt(5)').show();
        //dirty hack
    },                  
    select: function(event, ui) {         
        if(ui.item.link === '#'){
            jQuery(".sp-form-search input:first-child").val(ui.item.label);
            return false;
        }else{
            window.location.href=ui.item.link;    
        }                    
    }, 
    minLength: 1,
}); 

//Set matched string to bold    
$.ui.autocomplete.prototype._renderItem = function (ul, item) {     
    if ( item.type == 'user' ){
        var t = String(item.value).replace(
            new RegExp(this.term, "gi"),
            "<b>$&</b>");
    return $("<li data-id='user' class='user-li'></li>")
        .data("item.autocomplete", item)
        .append("" + t + "")
        .appendTo(ul);      
    } else if ( item.type == 'recent' ){
        var t = String(item.value).replace(
            new RegExp(this.term, "gi"),
            "<b>$&</b>");
    return $("<li data-id='recent' class='recent-li'></li>")
        .data("item.autocomplete", item)
        .append("" + t + "")
        .appendTo(ul);      
    } else {
    var t = String(item.value).replace(
            new RegExp(this.term, "gi"),
            "<b>$&</b>");
    return $("<li data-id='service' class='service-li'></li>")
        .data("item.autocomplete", item)
        .append("" + t + "")
        .appendTo(ul);
    }
};      

});

I tried by hiding all content and then showing 5 from each service, users, and recent queries but that does not work. My result looks like:

enter image description here

while it should be like:

enter image description here

Because I want it to show records from those 3 while it shows all records from top no matter what. If recent searches are 15 it will take those 15 while I want 5 from recent searches, 5 from users and 5 from services. Any help would be appreciated ...

Or can I provide 3 different sources containing object for each of my list and then can show 5 records from each. Any thing like that can work ? Or any other solution which can solve my issue ?