Asp.net Jquery列表框/文本框过滤器

我有以下jquery函数，用于从文本框中过滤onkeyup事件列表框的内容

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);
        }
    }
}

函数DoListBoxFilter（listBoxSelector、过滤器、键、值）{
变量列表=$（listBoxSelector）；
var selectBase='{1}'；
list.empty（）；
对于（i=0；i=0）{
var temp=String.format（selectBase，键[i]，值）；
列表。附加（临时）；
}
}
}

它适用于中小型列表，但在处理超过300-400个项目的列表时有点慢。。。有人能帮我优化一下javascript以加速功能吗

使用以下代码调用该函数：

    $('#<% = txtSearch.ClientID %>').keyup(function() {

        var filter = $(this).val();

        DoListBoxFilter('#<% = lstPars.ClientID %>', filter, keys_<% = this.ClientID %>, values_<% = this.ClientID %>);
    });

$（'#'）.keyup（函数（）{
var filter=$（this.val（）；
DoListBoxFilter（“#”，过滤器，键，值）；
});

为了使用它，我绑定了一个asp.net列表框，并在页面上填充了两个javascript数组（键和值）

这是将数据存储在页面上的两个位置，但是使用这种方法，我可以使用listbox的回发来获取所选值，而无需使用JavaScript来提取值并将其缓存在隐藏的div中。（这也省去了在客户端浏览器上加载页面时运行函数的麻烦..而这正是我所看到的速度缓慢的功能，因此在两个位置存储可以加快页面呈现速度）

我发现我需要使用javascript数组方法，因为大多数浏览器都不承认任何隐藏选项标记的尝试……只有Firefox会这么做

我不确定是否有可能进一步优化和加速这段代码，但如果有人有任何想法，我将不胜感激

谢谢，

---

Max Schilling

看起来您可能会在大型列表的性能方面受到影响，因为您一次添加一个与筛选器匹配的项目。我将建立一个匹配数组（或创建一个），然后一次性将其添加到DOM

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(''));  
}

函数DoListBoxFilter（listBoxSelector、过滤器、键、值）{
变量列表=$（listBoxSelector）；
var selectBase='{1}'；
list.empty（）；
var i=值。长度；
var-temp=[]；
var期权，价值；
而(i--){
值=值[i]；
if（value&&value.toLowerCase（）.indexOf（filter.toLowerCase（））！=-1）{
option=String.format（selectBase，key[i]，value）；
温度推送（选件）；
}
}
//我们得到了所有选项，现在附加到DOM
列表追加（临时联接（“”））；
}

看起来您可能会在大列表的性能方面受到影响，因为您一次添加一个与筛选器匹配的项目。我将建立一个匹配数组（或创建一个），然后一次性将其添加到DOM中

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(''));  
}

函数DoListBoxFilter（listBoxSelector、过滤器、键、值）{
变量列表=$（listBoxSelector）；
var selectBase='{1}'；
list.empty（）；
var i=值。长度；
var-temp=[]；
var期权，价值；
而(i--){
值=值[i]；
if（value&&value.toLowerCase（）.indexOf（filter.toLowerCase（））！=-1）{
option=String.format（selectBase，key[i]，value）；
温度推送（选件）；
}
}
//我们得到了所有选项，现在附加到DOM
列表追加（临时联接（“”））；
}

我也在使用相同的代码过滤列表框，但有一点变化，在我的代码中，我首先将搜索的值/单词与选项项进行比较，如果匹配成功，则只过滤列表

var existText=values[i]。子字符串（0，filter.length）

以下是完整代码：

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) {

    var existText = values[i].substring(0, filter.length);

    if (existText.toLowerCase() == filter.toLowerCase()) {

        var value = values[i];
        if (value === "" || value.toLowerCase().indexOf(filter.toLowerCase()) >= 0) {
            var temp = '<option value="' + keys[i] + '">' + value + '</option>';
            list.append(temp);
        }
    }
  }    
 }

var keys = [];
var values = [];

var options = $('#CountryList option');
$.each(options, function (index, item) {
  keys.push(item.value);
  values.push(item.innerHTML);
});

$(document).ready(function () {
  $('input#CountrySearch').on('keyup', function () {
    var filter = $(this).val();
    DoListBoxFilter('#CountryList', filter, keys, values);
  });
});

函数DoListBoxFilter（listBoxSelector、过滤器、键、值）{
变量列表=$（listBoxSelector）；
var selectBase='{1}'；
list.empty（）；
对于（i=0；i=0）{
变量温度=“”+值+“”；
列表。附加（临时）；
}
}
}    
}
var键=[]；
var值=[]；
var选项=$（“#国家列表选项”）；
$。每个（选项、功能（索引、项目）{
按键（项目值）；
value.push（item.innerHTML）；
});
$（文档）.ready（函数（）{
$（'input#CountrySearch'）。在（'keyup'，函数（）{
var filter=$（this.val（）；
DoListBoxFilter（“#国家列表”，过滤器，键，值）；
});
});

---

您还可以看到一个演示。在这个演示中，我使用了一个包含500多个列表项的列表，它工作正常，没有任何性能问题。

我也使用相同的代码来过滤列表框，但有一点变化，在我的代码中，我首先将搜索的值/字与选项项进行比较，如果匹配成功，则仅y筛选列表

var existText=values[i]。子字符串（0，filter.length）

以下是完整代码：

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) {

    var existText = values[i].substring(0, filter.length);

    if (existText.toLowerCase() == filter.toLowerCase()) {

        var value = values[i];
        if (value === "" || value.toLowerCase().indexOf(filter.toLowerCase()) >= 0) {
            var temp = '<option value="' + keys[i] + '">' + value + '</option>';
            list.append(temp);
        }
    }
  }    
 }

var keys = [];
var values = [];

var options = $('#CountryList option');
$.each(options, function (index, item) {
  keys.push(item.value);
  values.push(item.innerHTML);
});

$(document).ready(function () {
  $('input#CountrySearch').on('keyup', function () {
    var filter = $(this).val();
    DoListBoxFilter('#CountryList', filter, keys, values);
  });
});

函数DoListBoxFilter（listBoxSelector、过滤器、键、值）{
变量列表=$（listBoxSelector）；
var selectBase='{1}'；
list.empty（）；
对于（i=0；i=0）{
变量温度=“”+值+“”；
列表。附加（临时）；
}
}
}    
}
var键=[]；
var值=[]；
var选项=$（“#国家列表选项”）；
$。每个（选项、功能（索引、项目）{
按键（项目值）；
value.push（item.innerHTML）；
});
$（文件