Jquery列表框/文本框filter

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

function DoListBoxFilter(listBoxSelector, filter, keys, values) { var list = $(listBoxSelector); var selectBase = '{1}'; list.empty(); for (i = 0; i = 0) { var temp = String.format(selectBase, keys[i], value); list.append(temp); } } } 

它适用于中小型列表，但是当使用超过300-400个项目的列表时它有点慢…任何人都可以帮助一些想法来优化javascript以加快function吗？

使用以下代码调用该函数：

  $('#').keyup(function() { var filter = $(this).val(); DoListBoxFilter('#', filter, keys_, values_); }); 

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

这是将数据存储在页面上的两个位置，但是使用这种方法，我可以使用列表框的回发来获取所选值，而无需使用javacript来提取值并将其缓存在隐藏的div中。 （它还节省了必须在客户端浏览器上的页面加载时运行该function..这实际上是我看到缓慢的function，因此存储在两个位置加速了页面渲染）

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

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

谢谢，Max Schilling

Answer 1

看起来您可能在使用大型列表时遇到性能问题，因为您一次追加每个项目与筛选器匹配。 我会建立一个匹配数组（或创建一个documentFragment ），然后一次性将它附加到DOM。

 function DoListBoxFilter(listBoxSelector, filter, keys, values) { var list = $(listBoxSelector); var selectBase = '{1}'; 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 = '{1}'; 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 = '' + value + ''; 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搜索ListBox项目

      
 
  Vincent Jennifer Shynne Christian Helen Vladi Bee Jerome Vinz Churchill Rod Mark