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>

查询：

$('.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/

还有一件事：为了使布局正确，我使用$('.check-unit:nth-child(even)').css({'float':'right'});了（javascript 的第一行）。如果您在输入框中输入内容，布局会受到干扰，请告诉我此问题的解决方案。

4

2 回答 2

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 回答
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 回答