搜索字符串的一大组dom元素

我有一个搜索字符串的大型DOM元素集的最佳方法的问题。情况是，有一个JSON对象，其序列号为&。使用这个JSON对象，一个列表得到由div组成的构建，它可以滚动浏览。我最初的做法是将JSON对象存储在localStorage中，然后搜索localStorage，但是在ipad上，即使使用JSON.stringify来设置JSON对象，并且使用JSON.parse来检索它，JSON对象似乎仍然被错误地存储在localstorage中。搜索字符串的一大组dom元素

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

的div类似于此：

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

存在对textChange和搜索触发针对该组的div的字符串输入字段。

我尝试过各种搜索字符串的方式，但是在ipad上大多数人觉得呆滞。所有元素开始显示，我想隐藏那些不适用于搜索的元素。这是我到目前为止所尝试的：

使用包含： var txt = $（'＃searchField'）。val（）;

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

这需要大约400-500ms基于数据SERIALNUMBER每个请求

使用选择器来处理（ⅰ加入的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（），但发现它也很慢。

预先感谢看这:)

来源

2013-06-27 JanR

拥有大型数据集和一个iPad，这将永远是300-700ms范围内....无论您使用find（）方法，过滤器（），没有（）等....那里有可能没有办法绕过它...... 400毫秒，虽然不好，但.... – KyleK

是的，也许我看着这个错误的方式，也许我需要限制输入的响应性一点点，以便它感觉更直观，因为它是对每个击键做出请求 – JanR

哦，是的，我肯定会这样做（）或更改（）...或者在更改函数内部实现setTimeout（），以在提交之前的击键之间计数20-50ms或该性质的东西 – KyleK

我会做这样的...

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

来源

2013-06-27 02:10:25 KyleK

谢谢为此，当我到家时，会给这个裂缝:) – JanR

这工作就像一个治疗！感谢那！ – JanR

没问题！ :) – KyleK

搜索字符串的一大组dom元素

回答

相关问题