Jquery ajax auto complete problem

Question

Hi all,

I'm having newbie problems resolving an ajax autocomplete script if anyone would like to offer advise?

In my form i wish for users to select an event type (drop down box) which on selecting then displays a text box. This text box then offers a user the ability to autocomplete as they start typing, the options having been generated through AJAX depending on the event type selected.

I'm using a mix of http://pengoworks.com/workshop/jquery/autocomplete.htm - to carry out the autocomplete and some basic jquery to identify the value of the event type selected.

The problem I have within the code below is to pass the selected event type value, set as the variable 'caturl', into the 'extraParams:{cat:4}' replacing the 4 with the event type dynamically selected. Any help would be greatly received.

 $('#select').change(function() {
           $('.eventtype').hide();            
           $('#eventtype' + $(this).find('option:selected').attr('id')).show();
           caturl = $('#select :selected').val();             
        });

         $("#CityAjax").autocomplete(       
        'caturl.php',
        {
            delay:10,
            minChars:2,
            matchSubset:1,
            matchContains:1,
            cacheLength:10,
            onItemSelect:selectItem,
            onFindValue:findValue,
            formatItem:formatItem,
            extraParams:{cat:4},
            autoFill:true
        });

Answer 1

On the change event of your select list, you can call setOptions() on the autocomplete object. setOptions() re-configures the auto-complete widget and will override options set during in document.ready()