bootstrap 4，list-group，搜索除显示有限行之外的所有行

<div class="list-group" id="myList">
  <a href="#" class="list-group-item">行1</a>
  <a href="#" class="list-group-item">行2</a>
  <a href="#" class="list-group-item">行3</a>
  <a href="#" class="list-group-item">行4</a>
  <a href="#" class="list-group-item">行5</a>
  <a href="#" class="list-group-item">行6</a>
  <a href="#" class="list-group-item">行7</a>
  <a href="#" class="list-group-item">行8</a>
  <a href="#" class="list-group-item">行9</a>
  <a href="#" class="list-group-item">行10</a>
</div>

// 获取列表元素
var list = document.getElementById("myList");

// 获取搜索框元素
var searchInput = document.getElementById("searchInput");

// 监听搜索框输入事件
searchInput.addEventListener("input", function() {
  // 获取搜索关键字
  var keyword = searchInput.value.toLowerCase();

  // 获取所有列表项
  var items = list.getElementsByClassName("list-group-item");

  // 遍历列表项
  for (var i = 0; i < items.length; i++) {
    var item = items[i];
    var text = item.innerText.toLowerCase();

    // 根据搜索关键字显示或隐藏列表项
    if (text.indexOf(keyword) > -1) {
      item.style.display = "block";
    } else {
      item.style.display = "none";
    }
  }
});