Question

我有一个搜索功能下拉列表。我希望能够搜索“类别”，例如，查看我指定给所述类别的对象。如果没有结果，目前一切都是隐藏的（除了您搜索的类别除外），除非<li>中包含组/类别名称。

我的代码（here is the JSFiddle which loads cleaner, for some reason）：

$("#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

我最后在每个子项目中添加了带有类别名称的范围。有点四处，我很想看到别人能想出的更好，但是现在this new code works。尝试输入test in以查看我的意思。

旧代码：

let bubblePath = CGMutablePath.init()
let point1 = CGPoint(x: bubbleRect.origin.x+bubbleRect.size.width, y: bubbleRect.origin.y)
let point2 = CGPoint(x: bubbleRect.origin.x+bubbleRect.size.width, y: bubbleRect.origin.y+self.cornerRadius) 
bubblePath.addArc(tangent1End: point1, tangent2End: point2, radius: self.cornerRadius)

$("#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;
}

使用下拉菜单创建可搜索的群组？

2 个答案: