Prototype multiple auto completes

I'm trying to make an admin interface where one can chose models of different kinds and then save them as a new object.

Event.observe($('modelSearch'),'focus',function(){
    new Ajax.Autocompleter( 'modelSearch', 'autoCompleteModel', 'xxx',
    {
        paramName: "q",
        indicator: "makeWaitPic",
        parameters: "previusId=" + $( 'previusModelId' ).getValue(),
        afterUpdateElement: function( text, li )
            {
                if( li.id != '' )
                    $( 'modelId' ).value = <AjaxReturnValue>;
                else
                    $( 'modelSearch' ).value = '';
            }
    } );
});

The problem I have run into is that when I have an auto complete that depends on another auto complete I get a problem. The first auto complete let's you select a model and stores the selected model-ID in i a hidden input field. This value is being used by the second auto complete so that it knows which DB table it should look in.

problem 1: If I create both auto completes on dom:load they will read the input value before it has been set. And therefore the second auto complete will not work.

problem 2: If I create the auto completes on observe:focus they will read the value fresh each time but will then also create multiple instances of them self's each time one focuses the auto complete field.

Can I in any way make the auto complete read the input value fresh each time I use it and only init it once? Or can I in any way destroy the object which holds the auto开发者_Python百科 complete after I have used it and next time create a new one?

How can I solve this problem, any ideas?

I solved it by creating a new input element each time the first value changes, thus removing the old input and the auto complete object tied to it. And then creating a new auto complete tied to the new input field.

if( $( 'previousModelId' ).getValue() != prevId ){
    $('modelSearch').remove();
    $('wrapperId').insert({'top': '<input type="text" id="modelSearch" name="modelSearch" size="30" title="search model here." />'});
    initModelSearch();
    prevId = $( 'previousModelId' ).getValue();
}