用於過濾記錄的Jquery代碼。最好的技術/代碼

這裏是我的代碼...我所要做的就是過濾使用jquery，通過我從數據庫中提取的記錄的「數據集」。用於過濾記錄的Jquery代碼。最好的技術/代碼

這是我的代碼，但它效率極低。

<script> 
$(document).ready(function(){ 
    $("#descriptionField").bind('keyup',function(e){ 
     var filter = $(this).val(); 
     if(filter) 
     { 
      $("#list").find("a:not(:contains(" + filter + "))").parent().slideUp(); 
      $("#list").find("a:contains(" + filter + ")").parent().slideDown(); 
     } 
    }); 
}); 
</script>

來源

2012-01-18 Pepito Fernandez

刪除slideUp和slideDown功能，並添加一個油門，使其不會在每個鍵盤上運行。 – 2012-01-18 20:34:19

這屬於http://codereview.stackexchange.com。 – BalusC 2012-01-18 20:40:19

只是想知道爲什麼這個不移動，而是關閉？ – Jasper 2012-01-18 20:51:59

您可以在獲得多次使用始終緩存選項：

$(function(){ 
    var $A = $('#list').find('a'); 
    $("#descriptionField").bind('keyup',function(e){ 
     var filter = this.value; 
     if(filter.length > 0) 
     { 
      $A.filter(":not(:contains(" + filter + "))").parent().hide(); 
      $A.filter(":contains(" + filter + ")").parent().show(); 
     } 
    }); 
});

我刪除了較少的CPU密集型show()和hide()動畫slideDown()和slideUp()函數調用。此外，而不是使用jQuery來獲取輸入的值，我用this.value應該是更快一點。

而不是使用:not()和:contains()僞選擇器你可以使用filter()做到這一點：

$(function(){ 
    var $A = $('#list').find('a'); 
    $("#descriptionField").bind('keyup',function(e){ 
     var filter = this.value; 
     if(filter.length > 0) 
     { 
      $A.filter(function() { 
       return ($(this).text().indexOf(filter) === -1) 
      }).parent().hide(); 
      $A.filter(function() { 
       return ($(this).text().indexOf(filter) > -1) 
      }).parent().show(); 
     } 
    }); 
});

這裏是展示使用.filter()超過:contains()當性能提高了jsperf：http://jsperf.com/jquery-contains-vs-filter

來源

2012-01-18 20:38:12 Jasper

你可以做的另一個緩存事情是在事件綁定之外創建一個存儲以前使用的過濾器關鍵字的對象。如果過濾器已經完成，則使用該過濾器中的選定元素來顯示和隱藏。 – 2012-01-18 20:39:39

我替換了slideUp並放下顯示和隱藏。非常快。正是我們所需要的。非常感謝你的幫助。 – 2012-01-18 21:31:29

@Tony不客氣。如果更改爲'.filter（）'方法，則會在性能上再次出現問題。 – Jasper 2012-01-18 21:35:22

用於過濾記錄的Jquery代碼。最好的技術/代碼

回答

相關問題