how to merge ajax request with ajax response?

Question

Actually I am looking for something like above picture.

I was trying to add ajax request with ajax response,How ever i have failed with that one please help me out.

Source code:

$(function () {
var availableTags = [

    "gmail.com", "hotmail.com", "outlook.com", 


];

function customFilter(array, terms) {
    arrayOfTerms = terms.split("@");
    var term = $.map(arrayOfTerms, function (tm) {
         return $.ui.autocomplete.escapeRegex(tm);
    }).join('|');
   var matcher = new RegExp("\\b" + term, "i");
    return $.grep(array, function (value) {
       return matcher.test(value.label || value.value || value);
    });
};

$("#tags").autocomplete({



    multiple: true,
    mustMatch: false


    ,source: function (request, response) {

        // delegate back to autocomplete, but extract the last term
        response(customFilter(
        availableTags, request.term));
    },
});


          });

I have got this one..

Answer 1

The following overrides the source array to prepend the request term:

$("#tags").autocomplete({
    source: function (request, response) {
        if( request.term.indexOf("@") == -1 ){//char "@" not in request

            var arr = $.map(availableTags, function (tag, i) {
                return (request.term + "@" + tag);
            });

            response(arr);
        }
    }
});

FIDDLE