Question

Trying to use autocomplete functionality of YUI, we ran into the fact that it’s extremely slow on IE6 for a datasource containing 30000 items (when trying to type in an autocomplete field, it takes several MINUTES for IE to respond).

However, the same exact code works pretty much real-time in IE8.

Are we doing something wrong? Can we optimize this somehow? Is IE6+YUI autocomplete not designed for such large datasets?

Here’s our code initializing the autocompleter:

Y.namespace( 'YAHOO.program' );
Y.program.AllTreeItemsArr = new Array();
// Populate the array with 30000 elements
Y.program.BasicLocal = function() {
        var oDS = new YU.LocalDataSource(Y.program.AllTreeItemsArr);
        oDS.responseSchema = {fields : ["portfolio"]};
        var oAC = new Y.widget.AutoComplete("selected"
                                          , "autocomplete_container", oDS);
        oAC.prehighlightClassName = "yui-ac-prehighlight";
        oAC.useShadow = true;
        oAC.typeAhead = true;
        oAC.queryDelay = .05;
        oAC.typeAheadDelay = .5;

        return {
            oDS: oDS,
            oAC: oAC
        };
     }();

And here’s the HTML to use it:

    <span id="port_autocomplete" class="yui-skin-sam" style='position: relative;'>
         <input type='text' id='selected' maxlength=10 name='selected'
                value='' isSelected=1 onkeyup="searchOnEnter();">
         <div id="autocomplete_container" style="position: absolute"></div>
    </span>

The searchOnEnter function is a standard “catch a keypress and execute a search JS function if key == 13”.

Answer 1

The obvious answer is that IE has a slow JS engine, and 30000 records is a lot of data. However, the filtering operation does include one call that may be the root of your trouble. Try this patch out and see if it makes a difference:

http://gist.github.com/316358