Question

I allow a user to search a listbox which narrows results contained in said listbox.

The ajax request is fast to return the results and chrome is able to add the results quickly. The problem lies in the middle step where I actually empty the listbox.

Here’s the code:

function PopulateListBox(data, listBox) {

    var options = '';
    if (data != null) {
        for (var i = 0; i < data.length; i++) {
            options += "<option value=\"" + data[i].Id + "\">" + data[i].Name + '</option>';
        }
    }
    listBox.empty().append(options);
}

where data is a JSON array and listbox is a a jquery selector with the ID for a listbox (the selector is by ID e.g. $('#listbox'). There are about 5-10k options in the listbox.

Firefox and even IE handle this well but Chrome is stuborn (what happened to the “fastest js engine” google??).

I’m using the latest jquery (1.5.1) and Chrome 11.0.696.3 dev. (I’m also using FF 3.6 and IE 8)

Answer 1

Out of curiosity did you try replaceWith? (docs here.)
You’d need to have a div wrapping up your listBox, and that’d be the one you pass in to the PopulateListBox function. You’d also need to manually wrap the options variable with the listbox opening and closing tag info (shown below as pseudo html):

...
options = "<listbox tag>" + options + "</listbox tag>";
listBoxWrapperDiv.replaceWith(options);
...