jQuery Autocomplete, binding multiple autocomplete instances to the same text input

Question

I am trying to control two jQuery autocomplete searches with a single text field.

I can add jQuery autocomplete to an input using the code below:

    $("search-input").bind("autocompleteselect", jQuery.proxy(function (event, ui) {
      //List element select callback
    }, this)).autocomplete({
        appendTo:"#result-list-1",
        source: function (request, response) {
            $.ajax({
                url://some rest url,
                dataType: "jsonp",          
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },    
                success: function (data) {
                       alert("fb sucess"); 
                    response($.map(data.data, function (item) {
                     //data mapping instructions
                    }));
                },
            });
        }
    }).data("autocomplete")._renderItem = jQuery.proxy(function (ul, item) {
        return $("<li></li>").data("item.autocomplete", item).append("some html to append").appendTo(ul);
    })
}

When I try to apply this a second time to $("search-input") with other parameters for the autocomplete function it works but it undoes the original function.

Can any one suggest a way to set the second autocomplete with out undoing the first?

Answer 1

// getter
var oldsource = $( ".selector" ).autocomplete( "option", "source" );

var newsource = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]; //A new json object


//Merge it with old source
$.merge(oldsource, newsource);

// setter
$( ".selector" ).autocomplete( "option", "source", oldsource);