如何使用jQuery限制表记录的搜索结果数量？

Question

我想限制表格记录中的搜索结果数量为12或者小于15的任何数字等。这就是我用代码得到的结果。我究竟做错了什么？

我尝试在Stack Overflow中发布JS提琴，但代码太长，无法发布。

为了更好的理解，我准备了一个Js小提琴。

jQuery的部分单独如下：

$("#search").on("keyup", function() { 
var value = $(this).val(); 
$("table tr").each(function(index) { 
if (index !== 0) { 
    $row = $(this); 
    $row.find('td').each (function() { 
     var id = $(this).text(); 
     if (this.innerHTML.toLowerCase().indexOf(value.toLowerCase()) !== 0) { 

      $row.slice(0,12).hide(); 
     } 
     else { 
      $row.slice(0,12).show(); 
      return false; 
     } 
    }); 

} 
}); 
}); 

这里是的jsfiddle链接，我更好地了解准备。

https://jsfiddle.net/5g3yxrz4/

Answer 1

你可以这样说：https://jsfiddle.net/5g3yxrz4/5/

$("#search").on("keyup", function() { 
var value = $(this).val(); 
var showRowsLimit = 12; 
var rowsShowing = 0; 
$("table tr").each(function(index) { 
    if (index !== 0) { 
     $row = $(this); 
     $row.find('td').each (function() { 
      var id = $(this).text(); 
      if (this.innerHTML.toLowerCase().indexOf(value.toLowerCase()) !== 0 || rowsShowing>=showRowsLimit) { 
       $row.hide(); 
      } 
      else { 
       $row.show(); 
       rowsShowing++; 
       return false; 
      } 
     }); 
    } 
}); 
}); 

Answer 2

试试这个

const max = 12; // Maximum to show 
... 
var i = 0; 
... 
else if(i++ < max) { 
... 

https://jsfiddle.net/5g3yxrz4/3/

只需添加计数器显示为 “TR”