javascript - 如何制作可搜索的下拉菜单

Question

所以我使用 bootstrapp 制作了一个下拉菜单。

我在这里获取的代码:http://getbootstrap.com/docs/4.0/components/dropdowns/

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

现在我想在下拉列表中添加一个搜索框，以便人们可以输入，它会缩短为一个更合适的下拉列表。

我尝试找到很多方法，其中一些使用外部插件，如 Select2，但是，它们需要使用 <select> 编码的下拉菜单和 <option>标签 。相比之下，我的代码使用按钮和 Bootstrapp 的内置下拉类。

任何人都请帮助我。

Answer 1

当我想对列表进行排序时，我使用 list.js .这是一个示例，说明如何使用带有可过滤列表的 Boostrap-4 下拉列表来解决问题:

https://jsfiddle.net/o9b17p2d/29/

HTML:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2" id="dropdown-sorted-list">
    <ul class="dropdown-menu-list list">
      <li>
        <button class="dropdown-item dropdown-item-name" type="button">Action</button>
      </li>
      <li>
        <button class="dropdown-item dropdown-item-name" type="button">Another action</button>
      </li>
    </ul>
    <input type="text" class="form-control dropdown-item search" placeholder="Filter" aria-label="Filter" aria-describedby="basic-addon1">
  </div>
</div>

JS:请参阅 list.js documentation 中的示例 5关于如何设置list.js。

$(document).ready(function() {
  var options = {
    valueNames: ['dropdown-item-name']
  };

  var hackerList = new List('dropdown-sorted-list', options);
});

CSS:

.dropdown-menu-list {
  list-style-type: none;
  padding-left: 0;
}

正如您在 Bootstrap 4 documentation for dropdowns 中所读到的那样, 可以使用 <button>下拉列表中的元素。