用于筛选记录的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>

$（文档）.ready（函数（）{
$（“#descriptionField”）.bind（'keyup'，函数（e）{
var filter=$（this.val（）；
如果（过滤器）
{
$（“#list”）.find（“a:not（：contains（“+filter+”））.parent（）.slideUp（）；
$（“#列表”）.find（“a:contains（“+filter+”））.parent（）.slideDown（）；
}
});
});

您始终可以缓存多次使用的选择：

$(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（）

函数调用，以减少CPU密集度

show（）

和

hide（）

。另外，我没有使用jQuery来获取输入值，而是使用了

this.value

，这应该会快一点

除了使用

：not（）

和

：contains（）

的伪选择器之外，您还可以使用

过滤器（）

来执行以下操作：

$(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（）

：

删除slideUp和slideDown功能时性能的提高，并添加一个节流阀，这样它就不会在每个keyup上运行。这属于。只是想知道为什么它没有被移动，而是关闭？另一个缓存方法是在事件绑定之外创建一个对象，存储以前使用的过滤器关键字。如果已经完成了筛选，请使用该筛选中的选定元素显示和隐藏。我将slideUp和down替换为“显示和隐藏”。非常快。这正是我们需要的。非常感谢你的帮助。@Tony，不客气。如果您更改为

.filter（）

方法，您的性能将得到另一个提升。