Question

我有一个带有搜索字段的引导菜单，但是遇到了一个问题，它过滤了每个下拉菜单。例如，如果我从带有搜索字段的下拉列表中进行搜索，然后选择另一个字段，它将删除其他下拉列表项。换句话说，我只想过滤单个下拉列表。这是我的代码，并带有问题示例：

// Search
$("#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-criteria {
  padding: 10px;
  margin-top: -6px;
  border: 0;
  border-radius: 0;
  background: #f1f1f1;
}

span.searchitem {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="btn-group">
  <a class="btn dropdown-toggle btn-sm btn-light" data-toggle="dropdown" href="#">+</a>

  <ul class="dropdown-menu">
    <input class="form-control" id="search-criteria" type="text" placeholder="Search...">
    <h6 class="dropdown-header">Heading 1</h6>
    <a class="dropdown-item"><span class="searchitem">heading 1</span>li 1</a>
    <a class="dropdown-item"><span class="searchitem">heading 1</span>li 2</a>
    <a class="dropdown-item"><span class="searchitem">heading 1</span>li 3</a>
  </ul>
</div>

<div class="btn-group">
  <a class="btn dropdown-toggle btn-sm btn-light" data-toggle="dropdown" href="#">Edit</a>
  <ul class="dropdown-menu">
    <div class='wrapper'>
      <a href="#" id="someid" class="dropdown-item">Toggle Circle Crop</a>
      <a href="#" id="someid" class="dropdown-item">Toggle Oval Crop</a>
      <a href="#" id="someid" class="dropdown-item">Bring to Front</a>
      <a href="#" id="someid" class="dropdown-item">Bring Forward</a>
      <a href="#" id="someid" class="dropdown-item">Send Backwards</a>
      <a href="#" id="someid" class="dropdown-item">Send to Back</a>
    </div>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

我该如何实现？谢谢。

Answer 1

"#search-criteria"函数选择其.parent以获取下拉菜单...

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

演示：https://www.codeply.com/go/imYoVQu2TM

仅过滤1个菜单

1 个答案: