Код JQuery для фильтрации записей. лучшая техника/код

Question

вот мой код ... все, что я пытаюсь сделать, это отфильтровать с помощью 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> 

Answer 1

Вы всегда можете кэшировать варианты, которые привыкают несколько раз:

$(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(); 
     } 
    }); 
}); 

Я снял мультипликационный slideDown() и slideUp() функция требует меньше процессора интенсивной show() и hide(). Кроме того, вместо использования 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(); 
     } 
    }); 
}); 

Вот JSPerf, чтобы показать прирост производительности при использовании .filter() над :contains(): http://jsperf.com/jquery-contains-vs-filter