[joet86]

Hello all. I am attempting to add to the DOM using the following function, which utilizes Scriptaculous's Builder and Autocompleter libraries:

var add_number = 1;
function addInput() {	
    if (add_number <= 4) {
        var element = Builder.node('div', [
            Builder.node('label'),
            Builder.node('input',
                {type: 'text',
                 id: 'searchterm' + add_number,
                 className: 'text',
                 name: 'searchterm' + '[' + add_number + ']'}),
            Builder.node('div', { id: 'hint' + add_number, className: 'autocomplete' }),
            Builder.node('input',
                {type: 'hidden',
                 id: 'class_id' + add_number,
                 name: 'class_id' + '[' + add_number + ']'}),
        ]);
        var js = Builder.node('script');
        // the following must be done to appease IE, since IE does not like appending <script>s to the DOM
        js.type = 'text/javascript';
        js.text = 'new Ajax.Autocompleter("searchterm' + add_number + '", "hint' + add_number + '", "class_search.php", {minChars: 2, afterUpdateElement : getSelectedId' + add_number + ', parameters : \'num=' + add_number + '\'}); function getSelectedId' + add_number + '(text, li) { $(\'' + 'class_id' + add_number + '\').value=li.id; }';
        var rlink = Builder.node('a', { href: '#' }, 'Remove');
        rlink.onclick = function() {$(element).remove(); add_number--;}
        element.appendChild(js);
        element.appendChild(rlink);

        $('moreClasses').appendChild(element);
        add_number++;
    }
}

This function is used to add up to 4 text inputs to the page, each creating a new Ajax.Autocompleter. This code works great in Firefox and Safari, but in IE, the Autocompleter is messed up. I tried rewriting the function using Javascript's DOM functions (createElement, setAttribute, etc.), but had the same problem. Any suggestions? Thanks in advance!

-JoeT