bootstrap 4，列表组，搜索所有但显示有限的行

问题描述

我有一个脚本，它用搜索栏将数据库行显示为列表组。是的，它有效。

但是数据库大约有10.000行。我只想显示列表组中的前5行，但是我想用于搜索所有行。

    <ul class="list-group" id="myList">
   <?
      if ($result = $conn->query($sql)) {
      
      /* fetch object array */
      while ($row = $result->fetch_row()) {
      if ($show_row < 6) echo "<li class='list-group-item'>$row[0]</li>"; // show row
      if ($show_row > 5) echo "<li class='list-group-item'>$row[0]</li>"; // hide row,but use it for search
          $show_row++;
      }
      }
      ?>
</ul>

<script>
$(document).ready(function(){
  $("#myInput").on("keyup",function() {
    var value = $(this).val().toLowerCase();
    $("#myList li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

感谢您的回答;-）

解决方法

最简单的方法是在不想最初显示的行上使用CSS #+PROPERTY: header-args:R :session :exports results :results output latex #+begin_src R mod = lm(disp ~ cyl,data = mtcars) xtable::xtable(summary(mod)) #+end_src，然后在没有输入的情况下将其重置为原始状态。我还将预先消化可搜索的值，并将它们作为数据属性插入xtable::xtable()标记中，这样您就不必在搜索过程中为每个项目实时计算该值。

display:none

bootstrap-4 listgrid