代码之家 › 专栏 › 技术社区 › Max Schilling

jquery列表框/文本框筛选器

filter listbox jquery javascript asp.net

Max Schilling · 技术社区 · 15 年前

我有下面的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数组(键和值)。

这将数据存储在页面上的两个位置,但使用此方法,我可以使用列表框的回发来获取所选值,而无需使用javascript提取值并将其缓存到隐藏的分区中。(它还节省了在客户机浏览器上加载页面时运行函数的时间)。这就是我看到的慢的功能,所以在两个地方存储可以加快页面呈现速度)

我发现我需要使用javascript数组方法,因为大多数浏览器不承认有任何隐藏选项标记的尝试…只有火狐能做到。

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

谢谢, 马克斯席林

3 回复 | 直到 8 年前

Russ Cam 15 年前

看起来您在使用大列表时可能会遇到性能方面的问题,因为您一次只附加一个符合筛选条件的项。我会建立一个匹配数组(或创建一个 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(''));  
}

Jitender Kumar 8 年前

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

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多个列表项的列表,它运行良好,没有任何性能问题。

S.A. Khalili 8 年前

下面的链接帮助了我,尽管它是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>