3

チュートリアルの次のコードを適応させて、内容に基づいてli要素をフィルタリングしました。 

$('#_selectSearch_' + index).keyup(function() {
       var filter = $(this).val();
       if(filter) {
          $('#_selectDrop_' + index).find("li:not(:contains(" + filter + "))").slideUp();
          $('#_selectDrop_' + index).find("li:contains(" + filter + ")").slideDown();
       } else {
          $('#_selectDrop_' + index).find("li").slideDown();
       }
    });

コードは問題なく機能しますが、大きなリストを操作する場合は非常に遅く、キーを押すたびにブラウザが数秒間停止します。私は周りを見回して、これを改善する方法は、どういうわけかリストをキャッシュし、DOMを直接操作しないことですが、これを実装する方法がわからないという結論に達しました。

4

5 に答える 5

1

この要素をキャッシュできます$('#_selectDrop_' + index + ' li');

$('#_selectSearch_' + index).keyup(function() {
    var $li = $('#_selectDrop_' + index + ' li');
    var filter = $(this).val();
    if (filter) {
        $li.not(":contains(" + filter + ")").slideUp();
        $li.contains(filter).slideDown();
    } else {
        $li.slideDown();
    }
});​
于 2012-11-27T20:49:50.553 に答える
1

主な関心事がパフォーマンスである場合、次のコード：

  1. フィルタ文字列を含む要素をキャッシュします。
  2. li要素をキャッシュします。
  3. すでにその状態にある要素を表示または非表示にしません。
  4. 非常に高速なindexOfを使用します。
  5. ユーザーが500ミリ秒未満の間隔で文字を入力すると、showMatchesは実行されません。
var selectSearch = $("#_selectSearch_" + index );
var li = $("#_selectDrop_" + index + " li");
var currentTimeout;

selectSearch.on( "keyup", function( ) {
    if( currentTimeout ) { window.clearTimeout( currentTimeout ) };
    currentTimeout = setTimeout( showMatches, 500 );

});

function showMatches( ) {
    var txt = selectSearch.val();

    for( var i = 0, len = li.length; i < len; i++ ) {

        var content = li[i].textContent ? li[i].textContent : li[i].innerText;

        if( txt && content.indexOf( txt ) > -1) {
            if( li[i].style.display !== "block" ) {
                li[i].style.display = "block";
            }
        } else {
            if( li[i].style.display !== "none" ) {
                li[i].style.display = "none";
            }
        }
    }
}

ここで400li要素をいじる

于 2012-11-27T21:41:20.880 に答える
0 
$('#_selectSearch_' + index).keyup(function() {

   var filter = $(this).val();

   // by combining and cacheing all the way to the li
   // we save a lot of time, since it seems that's where you are doing
   // all your searching from

   var selectDrop = $('#_selectDrop_' + index + ' li');

   if (filter) {
      selectDrop.not(':contains("' + filter + '")').slideUp();
      selectDrop.contains(filter).slideDown();
   } 
   else {
      selectDrop.slideDown();
   }
});
于 2012-11-27T20:45:53.450 に答える
0 
drop = $('#_selectDrop_' + index + ' li');
$('#_selectSearch_' + index).keyup(function() {
   var filter = $(this).val();
   if(filter) {
      drop.find(":not(:contains(" + filter + "))").slideUp();
      drop.find(":contains(" + filter + ")").slideDown();
   } else {
      drop.slideDown();
   }
});

ドロップは一度だけキャッシュされ、その後、すべてのキーアップで使用されます。また、これは可能な限り最小限を使用しますfind

于 2012-11-27T20:45:18.833 に答える
0

多少変更された（そしてテストされていない）バージョンで試してみましょう：

$('#_selectSearch_' + index).on('keyup', function() {
    var filter = this.value,
        lis = document.getElementById('_selectDrop_' + index).getElementsByTagName('li'),
        len = lis.length,
        sup = 'textContent' in this;
    if (filter.length) {
        for (var i = len; i--) {
            var text = sup ? lis[i].textContent : lis[i].innerText;
            $(lis[i])[text.indexOf(filter) != -1 ? 'slideDown' : 'slideUp']();
        }
    } else {
        $(lis).slideDown();
    }
});​
于 2012-11-27T21:25:28.670 に答える