代码之家 › 专栏 › 技术社区 › anonymoose

仅过滤1个菜单

bootstrap-4 jquery javascript

0

anonymoose · 技术社区 · 7 年前

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

// 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>

我怎样才能做到这一点?谢谢您。

1 回复 | 直到 7 年前

1

Carol Skelly 7 年前

这个 "#search-criteria" 函数选择its .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