Jquery autocomplete change source

Question

I have Fiddle here

And I need availabletags1 as source if it's choice1 radio button is chosen and availabletags2 if choice2 radio button is chosen. And I need to change this dynamically by actual user choice.

CODE:

 var availableTags1 = [
"ActionScript",
"AppleScript",
"Asp"
];

var availableTags2 = [
"Python",
"Ruby",
"Scala",
"Scheme"
];

$( "#autocomplete" ).autocomplete({
source: availableTags1
});

$('input[name="choice"]').click(function(){
if(this.checked){
    if(this.value == "1"){
        $( "#autocomplete" ).autocomplete('option', 'source', availableTags1)
    } else {
        $( "#autocomplete" ).autocomplete('option', 'source', availableTags2)
    }

Answer 1

Try

$('input[name="choice"]').click(function(){
    if(this.checked){
        if(this.value == "1"){
            $( "#autocomplete" ).autocomplete('option', 'source', availableTags1)
        } else {
            $( "#autocomplete" ).autocomplete('option', 'source', availableTags2)
        }
    }
})

Demo: Fiddle

Answer 2

For anyone reading this in 2016 and beyond, there is a better way using the request/response pattern. jQuery autocomplete has a source option which accepts a function which will receive two arguments when invoked by the plugin: request and response. request is an object containing information about the autocomplete component, namely request.term which is the value of the input field. response is a function, accepting a single parameter, the returned data response(data). as you can see in my example below, you can use this option to facilitate an ajax request. you can simply pass the request function as the success callback to jQuery $.ajax methods and it will work as intended. you could also do other cool stuff using this pattern, like searching in memory if you have already fetched and cached some data, making subsequent searches more real time for users.

$('#term-search').autocomplete({
    source: function(request, response) {
        $.ajax({
            url: $('#api-endpoint').val(),//whether you are using radios, checkboxes, or selects, you can change the endpoint at runtime automatically
            dataType: "json",
            data: {
                query : request.term,//the value of the input is here
                language : $('#lang-type').val(), //you can even add extra parameters
                token : $('#csrf_token').val()
            },
            success: response //response is a callable accepting data parameter. no reason to wrap in anonymous function.
        });
    },
    minLength: 1,
    cacheLength: 0,
    select: function(event, ui) {} //do something with the selected option. refer to jquery ui autocomplete docs for more info
});

Answer 3

In my case i wanted to change the source data inside source function and mutate them before the responce(). So i just put a global variable (to the global execution context) in order to change the value of the global var in second time...

Example:

....

var jsonData = null;

....

// maybe inside a listener the code below
if (cond1) {
    jsonData = ['item1','item2'];
else {
    jsonData = ['anotherItem1', 'anotherItem2'];
}

....

$("#query").autocomplete({
  source: function(request, response) {
    if (request.term.length > 2) {
      var matches = $.map(jsonData, function(item) {

        // code code code ...
        if (maybeSomeCondition) {
          return item;
        }
      });
      response(matches);
    }
  },
//