0

リストフィルターを作成しようとしています。小さなリストでは問題なく動作しますが、大きなリストでは問題が発生し、非常に遅くなります。リセットボタンをクリックした場合、または一部の文字が削除された場合、新しいリストの表示が非常に遅くなります。これを行う方法に問題があるかもしれませんが、助けてください。以下は私のコードです: HTML:

<div class="filter-wrap">
  <span class="clearable">
    <input class="data_field" name="data_field" id="brands-search" placeholder="Search Brands Here" type="text"/>
    <span class="icon_clear" style="cursor:pointer;">✘&lt;/span>
  </span>
  <div class="small-bt"><p class="common all">select all &nbsp|</p><p class="common none">&nbspunselect all</p></div>
  <div class="check-wrap" id="brands">
    <div class="check-unit">
      <input type="checkbox" class="check" />
      <p class="slide-head brandList">Samsung</p>
  </div>
  </div>
</div>

JQuery:

$('.check-unit:nth-child(even)').css({'float':'right'});
function listFilter(list){
        $('.data_field').change( function () {
            var filter = $(this).val();
            if(filter) {
                $(list).children("p:not(:Contains(" + filter + "))").parent().slideUp();
                $(list).children("p:Contains(" + filter + ")").parent().slideDown();
                //console.log($(".a:nth-child(1)").text());
              } else {
                $(list).children("p").parent().slideDown().removeClass("a");
              }
          })
        .keyup( function () {
            $(this).change();
        });
}

ここcheck-unitが繰り返されます。詳細については、この jsfiddle http://jsfiddle.net/iiison/BdRpk/を参照してください。

もう1つ：レイアウトを適切にするために、私は使用しました$('.check-unit:nth-child(even)').css({'float':'right'});（javascriptの最初の行）。入力ボックスに何かを入力すると、レイアウトが乱れます。この問題の解決策も教えてください。

4

2 に答える 2

0

を使用しているため、大量のデータのパフォーマンスが低下していると思いますslideUp()/slideDown()。hide()代わりにを使用しないのはなぜですか。

以下は、div 内の連絡先のリストからフィルター/検索機能を作成するコードです。連絡先は別の div の子 div として入力されました

function searchContacts(entered_text){
    entered_text = entered_text.toUpperCase();//convert the filter value to uppercase to make it non case sensitive
    $("#external-events").children().show(); //Refresh the div containing the contact list. Id of the parent div is "external-events"
    var contactDivs = $("#external-events").children();
    for (var iter=0;iter<contactDivs.length ; iter++)
    {
        contactDivs[iter].firstChild.value = contactDivs[iter].firstChild.value.toUpperCase();
        if(contactDivs[iter].firstChild.value.indexOf(entered_text)== -1) {             // Does not contain
            $(contactDivs[iter]).hide();
        }
    }
}

これにより、基準を満たす他の要素が非表示になり、実際に基準を満たす要素が除外されます。

于 2013-05-24T13:03:52.537 に答える
0

コードのパフォーマンスを向上させるようにしてください。純粋な JS で実行できる場合は jQuery を使用しないでください。クラス セレクターの前に、パフォーマンスが向上する要素を適用してみてください。

$('div.check-unit:even').css({'float':'right'});

// Why are you define evt handler in a function, and how many times do you call this function ? This could conduct to a huge memory use.

function listFilter(list){
    $('.data_field').keyup( function () {
        var filter = this.value;
        if(filter) {

            //Unoptimized code... Can you provide a fiddle to speed up the debug ?

            $(list).children("p:not(:Contains(" + filter + "))").parent().slideUp();
            $(list).children("p:Contains(" + filter + ")").parent().slideDown();
            //console.log($(".a:nth-child(1)").text());
          } else {
            $(list).children("p").parent().slideDown().removeClass("a");
          }

           //END of Unoptimized code...
      });

}
于 2013-05-24T13:04:11.120 に答える