CODEWITHSUNDEEP
jqueryautocompletejquery-autocompletejquery-ui-autocomplete
Ludvik Ctrnacty
Ludvik Ctrnacty

Reputation: 351

Jquery autocomplete change source

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

Upvotes: 24

Views: 34260

Answers (3)

menepet
menepet

Reputation: 882

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

Upvotes: 0

r3wt
r3wt

Reputation: 4742

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

Upvotes: 23

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 36

Related Questions