jQuery的列表框/文本框过滤器(Jquery Listbox / Textbox filter)

我有用于对从文本框中的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阵列（key和value）。

这是存储在页面上两个地方的数据，但使用这种方法，我可以使用列表框的回传，以获得选择的值，而无需使用javacript提取值和一个隐藏的div缓存它。（还省去了跑在客户端上的浏览器页面加载功能..那是真的在那里我看到了缓慢的功能，使存储在两个地方加快页面渲染）

我发现，我需要使用JavaScript阵列的方法，因为大多数浏览器不承认任何企图隐藏的选项标签...只有火狐似乎做到这一点。

我不知道它可以优化和加快该代码的任何更多，但如果任何人有任何想法，我将不胜感激。

谢谢，最大林女士

Answer 1:

它看起来像你可能在与大型列表性能方面是痛苦，因为你是在该过滤器匹配时追加的每个项目之一。我想建立一个匹配的阵列（或创建一个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 2:

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

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

您还可以看到一个演示这里。在这个演示中，我已经使用含有500多个列表项和它的做工精细，没有任何性能问题的列表。

Answer 3:

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

使用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 Listbox / Textbox filter