1

大量の DOM 要素から文字列を検索する最善の方法について質問があります。状況は、製品とシリアル番号を含む JSON オブジェクトがあることです。この JSON オブジェクトを使用すると、スクロール可能な div で構成されるリストが作成されます。JSON.stringify私の最初のアプローチは、JSON オブジェクトを localStorage に保存し、localStorage を検索することでしたが、iPad では、JSON オブジェクトを設定して取得しても、localstorage に正しく保存されないよう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 に基づくセレクターの使用 (シリアル番号もデータ要素として追加しました):

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

リクエストごとに約 400 ミリ秒かかります。

.hide() を使用する代わりに css クラスを使用して要素を非表示にすることも試みましたが、これは大きな違いはありませんでした。

チュートリアルで、これまでで最速のアプローチと思われるデフォルト セレクターの拡張機能を見つけました。

 $.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 に答える