1

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

我正在 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() 但发现它也很缓慢。

提前感谢您查看此内容:)

4

1 回答 1

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 毫秒后才会响应......然后它会搜索。

在这里演示

于 2013-06-27T02:10:25.077 回答