使用jQuery快速搜索大列表

我正在使用此代码搜索大约500个li标签。

$(function() { $.expr[":"].containsInCaseSensitive = function(el, i, m){ var search = m[3]; if (!search) return false; return eval("/" + search + "/i").test($(el).text()); }; $('#query').focus().keyup(function(e){ if(this.value.length > 0){ $('ul#abbreviations li').hide(); $('ul#abbreviations li:containsInCaseSensitive(' + this.value + ')').show(); } else { $('ul#abbreviations li').show(); } if(e.keyCode == 13) { $(this).val(''); $('ul#abbreviations li').show(); } }); }); 

这是HTML：

  
 
ABCdescription
 
BCAdescription
 
ADCdescription
  

这个很多li标签的脚本非常慢。

如何让它更快，如何只搜索li中的ABC文本，而不是span标记（不更改html）？

我知道现有的插件，但我需要一个像这样的小实现。

这是任何感兴趣的人的完成代码

 var abbrs = {}; $('ul#abbreviations li').each(function(i){ abbrs[this.firstChild.nodeValue] = i; }); $('#query').focus().keyup(function(e){ if(this.value.length >= 2){ $('ul#abbreviations li').hide(); var filterBy = this.value.toUpperCase(); for (var abbr in abbrs) { if (abbr.indexOf(filterBy) !== -1) { var li = abbrs[abbr]; $('ul#abbreviations li:eq('+li+')').show(); } } } else { $('ul#abbreviations li').show(); } if(e.keyCode == 13) { $(this).val(''); $('ul#abbreviations li').show(); } }); 

Answer 1

首先将所有项缓存到对象中：

 var abbrs = {}; $("ul#abbreviations li").each(function (i) { abbrs[this.firstChild.nodeValue] = this; }); 

然后在对象中查找键入的文本：

 var li = abbrs[this.value.toUpperCase()]; // show li, hide others 

更新：对于部分匹配，您必须遍历集合：

 var filterBy = this.value.toUpperCase(); for (var abbr in abbrs) { if (abbr.indexOf(filterBy) !== -1) { var li = abbrs[abbr]; // show li } } 

Answer 2

对于初学者，我会使用new RegExp而不是eval ，看看是否提高了性能。

我假设您正在动态填充li标签。 有没有办法搜索直接填充此列表的数据结构，而不是搜索DOM对象？ 如果我的假设不正确，你可以在开头循环遍历列表并构建一个字符串数组，然后可以搜索它们吗？

编辑：以下是如何构建字符串列表

 var listTerms = []; $("ul#abbreviations li").each(function (li) { listTerms.push({text : li.firstChild.nodeValue, elem : li}); }); 

这是你如何搜索（简单的循环，没有花哨的）

 var exp = new RegExp(text, "i"); for(var i=0; i 

Answer 3

我不是一个javascript编码器或熟悉jquery，但我之前有一个类似的问题，有一个项目规范提案的js eye-candy目录树。

正则表达式显然是你的瓶颈。 javascript是否具有高效的数组处理function，而不是正则表达式的全部开销？ 在文档加载时解析HTML时，

标记是否已经解析为DOM数组？ 在这些

节点上遍历DOM树，将它们复制到数组中，然后在结果数组上使用’find_value’类型的函数来查找值应该很简单。

Answer 4

我也发现这个链接非常有用，你应该看一下。 在这里，您可以：“ 使用jQuery实时搜索HTML列表 – 无需插件 ”