Question

我对搜索字符串的大量DOM元素的最佳方法有疑问。情况是有一个JSON对象说产品＆amp;序列号。使用此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毫秒才能处理

使用基于data-serial-number的选择器（我也将serialnumber添加为数据元素）：

$(".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)
});

这样，它只会在停止键入50ms后才响应....然后搜索。

DEMO HERE

搜索大量字符串的dom元素

1 个答案: