jQuery的列表框/文本框过滤器 [英] Jquery Listbox / Textbox filter

问题描述

我有以下的jquery函数来过滤来自文本框的onkeyup事件上的列表框的内容。

 函数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 value = values [i]; 
 
 if（value ==|| value.toLowerCase（）。indexOf（filter.toLowerCase（））> = 0）{
 var temp = String.format（selectBase，键[我]，值）; 
 list.append（temp）; 
 
 
 
 
 
 
中等大小的列表，但它的工作列表超过300-400项目是有点慢...任何人都可以帮助一些想法优化JavaScript的一点点加快功能？
 
 
使用以下代码调用该函数：
 
 $ $ $ $''<％= txtSearch。 ClientID％>'）。keyup（function（）{
 
 var filter = $（this）.val（）; 
 
 DoListBoxFilter（'＃<％= lstPars .ClientID％>'，filter，keys_<％= this.ClientID％>，values_<％= this.ClientID％>）; 
}）; 
  

为了使用这个，我绑定一个asp.net列表框，并且填充两个javascript数组（key和value ）在页面上。

这是存储在页面上的两个地方的数据，但使用这种方法我能够使用列表框的回发得到选择值而不使用javacript来提取值并将其缓存在隐藏的div中。 （这也节省了不得不运行在客户端浏览器页面加载功能..这是真正的功能，我看到的缓慢，所以存储在两个地方加快了页面渲染）

我发现我需要使用JavaScript数组方法，因为大多数浏览器都不会承认任何隐藏选项标签的尝试......只有Firefox似乎这样做。

我不确定是否可以优化和加快这个代码，但如果有人有任何想法，我将不胜感激。

谢谢，
Max Schilling

解决方案

每次添加一个匹配过滤器的项目。我会建立一个匹配数组（或创建一个 documentFragment ），然后将其附加到DOM一气呵成。

 函数DoListBoxFilter（listBoxSelector，filter，keys，values）{
 var list = $（listBoxSelector）; 
 var selectBase ='< option value ={0}> {1}< / option>'; 
 
 list.empty（）; 
 var i = values.length; 
 var temp = []; 
 var选项，值; 
 while（i--）{
 value = values [i]; 
 if（value& value.toLowerCase（）。indexOf（filter.toLowerCase（））！== -1）{
 option = String.format（selectBase，keys [i]，value ）; 
 temp.push（选项）; 
 
 
 //我们得到所有的选项，现在附加到DOM 
 list.append（temp.join（''））; 
} 
  

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

It works great for small to medium size lists, but it is a little bit slow when working with lists over 300-400 items... Can anyone help with some ideas to optimize the javascript a little bit to speed up the function?

The function is invoked with the following code:

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

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

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

To use this, I bind an asp.net listbox and also populate two javascript arrays (key and value) on the page.

This IS storing the data in two places on the page, but using this method I am able to use the postback of the listbox to get the selected value without using javacript to extract the value and cache it in a hidden div. (it also saves having to run the function at page load on the clients browser.. and that is really the function where I am seeing the slowness, so storing in two places speeds up the page rendering)

I found that I needed to use the javascript array approach because most browsers don't acknowledge any attempts to hide an option tag... only Firefox appears to do it.

I'm not sure its possible to optimize and speed this code up any more, but if anyone has any ideas I would appreciate it.

Thanks, Max Schilling

解决方案

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

这篇关于jQuery的列表框/文本框过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！