使用下拉列表创建可搜索的组

Question

我有一个带有搜索功能的下拉列表。例如，我希望能够搜索"类别"，并查看我指定为所述类别的对象。目前，如果没有结果，则所有内容都是隐藏的(您搜索的类别除外(，除非<li>中包含组/类别名称。

我的代码(由于某种原因，这是加载清洁器的JSFIDDLE(：

$("#search-criteria").on("keyup", function() {
  var g = $(this).val().toLowerCase();
  $(".dropdown-item").each(function() {
    var s = $(this).text().toLowerCase();
    $(this).closest('.dropdown-item')[s.indexOf(g) !== -1 ? 'show' : 'hide']();
  });
});

.search-box {
  margin: 10px;
}
.scrollable-menu {
  height: auto;
  max-height: 500px;
  overflow-x: hidden;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button class="btn btn-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Components
  </button>
  <div class="dropdown-menu scrollable-menu" aria-labelledby="dropdownMenuButton">
    <li class="row search-box">
      <input class="form-control search" id="search-criteria" type="text" placeholder="Search components" />
    </li>
    <a class="dropdown-item" href="#">Component 1</a>
    <a class="dropdown-item" href="#">Component 2</a>
    <a class="dropdown-item" href="#">Component 3</a>
    <h6 class="dropdown-header dropdown-item">Category</h6>
    <a class="dropdown-item" href="#">Component In C</a>
    <a class="dropdown-item" href="#">Component 2 In C</a>
    <h6 class="dropdown-header dropdown-item">Category 2</h6>
    <a class="dropdown-item" href="#">Component In C2</a>
    <a class="dropdown-item" href="#">Component 2 In C2</a>
  </div>
</div>

Answer 1

将所有内容分开更多，将每个标头放在自己的部分中，然后将项目嵌套在其下方。然后，当您在搜索范围时涉及所需的H6的范围时，您可以按班级隐藏/显示所有孩子的元素，

 $(this).children('.dropdown-item').show();

或类似的东西。

Answer 2

我最终将跨度添加到我的每个子项目中。有点绕着，我很想看看别人可以提出的更好，但是现在这个新代码可以。尝试输入测试以查看我的意思。

旧代码：

$("#search-criteria").on("keyup", function() {
  var g = $(this).val().toLowerCase();
  $(".dropdown-item").each(function() {
    var s = $(this).text().toLowerCase();
    $(this).closest('.dropdown-item')[s.indexOf(g) !== -1 ? 'show' : 'hide']();
  });
});

.search-box {
  margin: 10px;
}
.scrollable-menu {
  height: auto;
  max-height: 500px;
  overflow-x: hidden;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button class="btn btn-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Components
  </button>
  <div class="dropdown-menu scrollable-menu" aria-labelledby="dropdownMenuButton">
    <li class="row search-box">
      <input class="form-control search" id="search-criteria" type="text" placeholder="Search components" />
    </li>
    <a class="dropdown-item" href="#">Component 1</a>
    <a class="dropdown-item" href="#">Component 2</a>
    <a class="dropdown-item" href="#">Component 3</a>
    <h6 class="dropdown-header dropdown-item">Category</h6>
    <a class="dropdown-item" href="#">Component In C</a>
    <a class="dropdown-item" href="#">Component 2 In C</a>
    <h6 class="dropdown-header dropdown-item">Category 2</h6>
    <a class="dropdown-item" href="#">Component In C2</a>
    <a class="dropdown-item" href="#">Component 2 In C2</a>
  </div>
</div>