jQuery Autocomplete plugin (Jorn Zaefferer's) - how to dynamically change the list of displayed valu
- by Max Williams
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
