I have the following jquery function for filtering the contents of a listbox on the onkeyup event from a textbox.
function DoListBoxFilter(listBoxSelector, filter, keys, values) {
var list = $(listBoxSelector);
var selectBase = '<option value="{0}">{1}</option>';
list.empty();
for (i = 0; i < values.length; ++i) { //add elements from cache if they match filter
var value = values[i];
if (value == "" || value.toLowerCase().indexOf(filter.toLowerCase()) >= 0) {
var temp = String.format(selectBase, keys[i], value);
list.append(temp);
}
}
}
$('#<% = txtSearch.ClientID %>').keyup(function() {
var filter = $(this).val();
DoListBoxFilter('#<% = lstPars.ClientID %>', filter, keys_<% = this.ClientID %>, values_<% = this.ClientID %>);
});
It looks like you might be suffering in terms of performance with large lists because you are appending each item one at a time that matches the filter. I would build up an array of matches (or create a documentFragment) and then append that to the DOM in one go.
function DoListBoxFilter(listBoxSelector, filter, keys, values) {
var list = $(listBoxSelector);
var selectBase = '<option value="{0}">{1}</option>';
list.empty();
var i = values.length;
var temp = [];
var option, value;
while (i--) {
value = values[i];
if (value && value.toLowerCase().indexOf(filter.toLowerCase()) !== -1) {
option = String.format(selectBase, keys[i], value);
temp.push(option);
}
}
// we got all the options, now append to DOM
list.append(temp.join(''));
}