javascript - 在一大组 dom 元素中搜索字符串

Question

我有一个关于在大量 DOM 元素中搜索字符串的最佳方法的问题。情况是有一个 JSON 对象，其中包含产品和序列号。使用此 JSON 对象构建一个由 div 组成的列表，可以滚动浏览。我最初的方法是将 JSON 对象存储在 localStorage 中并搜索 localStorage，但是在 ipad 上，即使使用 JSON.stringify 设置它和 JSON.parse<，JSON 对象似乎也错误地存储在 localStorage 中 检索它。

我正在 iPad 上运行 Phonegap 应用程序，希望用户能够搜索项目集合以查找与序列号上一定数量的字符匹配的任何项目。

div 看起来与此类似:

<div data-id="XX">
 Some Serial Number
</div>

有一个输入字段会在 textChange 时触发并在 div 集中搜索字符串。

我尝试过各种搜索字符串的方法，但在 ipad 上，大多数方法都感觉很慢。所有元素一开始都是可见的，我想隐藏那些不适用于搜索的元素。这是我到目前为止所尝试过的:

使用包含: var txt = $('#searchField').val();

$('.product:not(:contains("'+txt+'"))').hide();

处理每个请求大约需要 400-500 毫秒

使用基于数据序列号的选择器(我也将序列号添加为数据元素):

$(".product:not([data-serial-number*='" + txt + "'])").hide()

每个请求大约需要 400 毫秒。

我还尝试过使用 css 类来隐藏元素，而不是使用 .hide()，但这并没有太大的明显区别。

在教程中，我发现了默认选择器的扩展，这似乎是迄今为止最快的方法:

 $.expr[":"].containsNoCase = function(el, i, m) {
                  var search = m[3];
                  if (!search) return false;
                  return eval("/" + search + "/i").test($(el).text());
          };

$('.product:containsNoCase(\'' + txt + '\')').hide();

我想我的问题是是否还有其他方法可以更快地实现此搜索？我尝试过使用 .find() 但发现它也很慢。

预先感谢您查看此内容:)

Answer 1

我会这样做......

var timeout;
$('#searchField').keyup(function() {
var filter = $(this).val(); 
if(timeout) {
    clearTimeout(timeout);
    timeout = null;
}
timeout = setTimeout(function(){
if(filter.length>0) { 
$('.product').show();
$('.product:not(:contains("'+filter+'"))').hide();
$('.product:contains("'+filter+'"))').show();
} else { $('.product').show();} 
}, 500)
});

这样，它只会在停止输入 50 毫秒后响应......然后进行搜索。

DEMO HERE