Question

I’m using Jorn Zaefferer’s Autocomplete query plugin, http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

I have options set so it shows all the values when you click in the empty text field, a bit like a select, and the option is also set so that the user can only choose from the list of values used by the autocomplete (so it’s kind of like a select but with autocomplete functionality).

I have two radio buttons below the text field, which determine whether the user chooses from a long list or a short list of possible values. I want to update the values used in the autocomplete when one of these radio buttons is clicked. Currently i’m doing this in a not very clever way by calling autocomplete again on the same text field, with the different array of values, but this creates a situation where both are active at once, and i can see the long list peeking out from behind the short list.

What i need to do is either
a) dynamically change the values used in the autocomplete or
b) remove (unbind?) the autocomplete from the text field before re-initialising it.

Either of these would do tbh though option a) is kind of nicer.

Any ideas anyone? Here’s my current code:

function initSubjectLongShortList(field, short_values, long_values){
  $(".subject_short_long_list").change(function(){
    updateSubjectAutocomplete(field, short_values, long_values);
  });
  updateSubjectAutocomplete(field, short_values, long_values);
}

function updateSubjectAutocomplete(field, short_values, long_values){
  if($(".subject_short_long_list:checked").attr('id') == "subject_long_list"){
    initSubjectAutocomplete(field, long_values);
  } else {
    initSubjectAutocomplete(field, short_values);    
  }
}

function initSubjectAutocomplete(field, values){
  jQuery(field).autocomplete(values, {
    minChars: 0,  //make it appear as soon as we click in the field
    max: 2000,
    scrollHeight: 400,
    matchContains: true,
    selectFirst: false
  });     
}

cheers, max

Answer 1

It’s done like this, as far as I remember.

a)

$("#id").setOptions({
  data: array_goes_here
}).flushCache();

b)

$("#id").unbind();

You can choose either way.