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)
    }

Jedediah

are availabletags1 and availabletags2 arrays – Patty

also what is choice1 and choice2 – Patty

Sry, I post wrong link on jsfiddle, now it should be ok. – Jedediah

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

Patty

Great, it works. Now I just need to merge your solution with this http://jsfiddle.net/7RL4p/11/ and I still can't get it work. – Jedediah

Amazing, thanks. Do you know how to add search by "typed letter" - i mean - if user type "c" now (from availableTags1) - it shows javascript, but i want to show nothing, because nothing starts with c. And etc. (if user type (from availableTags1) Sc - it should show Scala, Scheme; if Sca - now only Scala). I hope I wrote it understandable. And also - is somehow posibble to set max number of displayed values? Thanks – Jedediah

the documentation link about it : api.jqueryui.com/autocomplete/#method-option – Respecting

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
});

Ayah

That's awesome ! – Stressful

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);
    }
  },
// 

Schnorr