jquery列表框/文本框筛选器

我有以下jquery函数用于从文本框中筛选onkeyup事件上的列表框的内容。jquery列表框/文本框筛选器

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

它为小到中等规模名单的伟大工程，但它与清单超过300-400项工作时有点慢......任何人都可以有一些想法，有利于优化JavaScript的一点点加快功能？

的函数被调用，用下面的代码：

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

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

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

要使用此，我结合一个asp.net列表框，并且还填充两个JavaScript数组在页面上（键和值）。

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

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

我不确定是否有可能优化并加速此代码，但如果任何人有任何想法，我将不胜感激。

感谢，最大林女士

来源

2009-11-06 Max Schilling

它看起来像你可能在与大型列表性能方面是痛苦，因为你是在该过滤器匹配时追加的每个项目之一。我会建立一个匹配数组（或创建一个documentFragment），然后将其附加到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('')); 
}

来源

2009-11-06 16:39:14

由于拉斯，这似乎更快地跑了一下我。唯一的问题是，它颠倒了列表中的项目顺序，但这是一个简单的解决方法。 – 2009-11-09 14:47:00

我也使用相同的代码来过滤列表框，但有一点变化的，在我的代码首先我对选项项目比较搜索值/字，如果比赛了成功，然后进行筛选列表。

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

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

以下是完整代码：

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

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

来源

2014-01-29 08:56:09

以下链接帮助了我，虽然它是JavaScript。

Search ListBox items using JavaScript

<head id="Head1" runat="server"> 
    <title>Demo</title> 
</head> 

<script type="text/javascript" language="javascript"> 

    function SearchList() 
    { 
     var l = document.getElementById('<%= ListBox1.ClientID %>'); 
     var tb = document.getElementById('<%= TextBox1.ClientID %>'); 
     if(tb.value == ""){ 
      ClearSelection(l); 
     } 
     else{ 
      for (var i=0; i < l.options.length; i++){ 
       if (l.options[i].value.toLowerCase().match(tb.value.toLowerCase())) 
       { 
        l.options[i].selected = true; 
        return false; 
       } 
       else 
       { 
        ClearSelection(l); 
       } 
      } 
     } 
    } 

    function ClearSelection(lb){ 
     lb.selectedIndex = -1; 
    } 

</script> 
<body> 
    <form id="form1" runat="server"> 
    <asp:TextBox ID="TextBox1" runat="server" onkeyup="return SearchList();"/><br /> 
    <asp:ListBox ID="ListBox1" runat="server" Height="150px" Width="250px"> 
    <asp:ListItem>Vincent</asp:ListItem> 
    <asp:ListItem>Jennifer</asp:ListItem> 
    <asp:ListItem>Shynne</asp:ListItem> 
    <asp:ListItem>Christian</asp:ListItem> 
    <asp:ListItem>Helen</asp:ListItem> 
    <asp:ListItem>Vladi</asp:ListItem> 
    <asp:ListItem>Bee</asp:ListItem> 
    <asp:ListItem>Jerome</asp:ListItem> 
    <asp:ListItem>Vinz</asp:ListItem> 
    <asp:ListItem>Churchill</asp:ListItem> 
    <asp:ListItem>Rod</asp:ListItem> 
    <asp:ListItem>Mark</asp:ListItem> 
    </asp:ListBox> 
    </form> 
</body> 
</html>

来源

2017-03-03 14:50:13

jquery列表框/文本框筛选器

回答

相关问题