Question

我有以下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);
        }
    }
}

它适用于中小型列表，但是当处理超过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才会这样做。

我不确定是否可以优化和加速此代码，但如果有人有任何想法我会很感激。

谢谢， Max Schilling

Answer 1

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

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



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

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

以下是完整代码：

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

Answer 2

看起来您可能会遇到大型列表的性能问题，因为您要一次追加每个项目一个与过滤器匹配的项目。我会建立一个匹配数组（或创建一个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(''));  
}

Answer 3

以下链接帮助了我，虽然它是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>

Jquery列表框/文本框过滤器

3 个答案: