javascript - 如何通过按键进行快速搜索过滤？

Question

我正在尝试在包含大量表数据的表中添加过滤功能。近800 td .

我可以在输入内容时搜索文本，但我的逻辑非常慢。它不允许我在搜索之前完整地编写文本，有点卡在文本输入中。

所以我正在寻找帮助来找出这段代码中的问题。如何优化这个？谁能帮帮我。

这是代码

jQuery("#sear").keyup(function(){
var searching_val = jQuery(this).val();
var mysearch = new RegExp(searching_val,'gi'); 
jQuery("#container td").each(function(){
if(mysearch.test(jQuery(this).data('samp'))){
    jQuery(this).show();
}else{
    jQuery(this).fadeOut();
}
   });
});

JSFIDDLE

我在 fiddle 中显示的示例只有两行。实际上我有更多Rows更多 Table Data .

当我们拥有更多 td 时，这是常见行为吗？ ？或者有没有办法优化这个？我无法避免循环遍历 <td> data-samp属性也是如此，因为内容的格式不同，这些与示例中所见不同。所以所有这些都存储在表的数据属性中td检索它以进行输入。

如有任何帮助，我们将不胜感激。

Answer 1

这是适合您的代码:

jQuery("#sear").keyup(function(e){
    var searching_val = jQuery(this).val();
    setTimeout(function(){
       if(searching_val != ""){  // If search value is not empty value
          jQuery("#container td").show();
          jQuery("#container td").each(function(){
              if(jQuery(this).text().indexOf(searching_val) < 0){
                  jQuery(this).hide();
              }
          });
       }else{
          jQuery("#container td").show();  // Show all td's
       }
    }, 2000);
});

就是这样。