24

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)
    }
3
  • are availabletags1 and availabletags2 arrays Commented Aug 26, 2013 at 10:27
  • also what is choice1 and choice2 Commented Aug 26, 2013 at 10:28
  • Sry, I post wrong link on jsfiddle, now it should be ok. Commented Aug 26, 2013 at 11:14

3 Answers 3

36

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

Sign up to request clarification or add additional context in comments.

3 Comments

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.
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
the documentation link about it : api.jqueryui.com/autocomplete/#method-option
23

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

1 Comment

That's awesome !
0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.