如何制作可搜索的下拉菜单答案

【问题标题】：How to made a searchable drop down如何制作可搜索的下拉菜单
【发布时间】：2017-09-27 08:52:06
【问题描述】：

所以我使用 bootstrap 做了一个下拉菜单。

我在这里拿的代码：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> 标签编码的下拉列表。相比之下，我的代码使用了按钮和 Bootstrap 的内置下拉类。

请任何人帮助我。

【问题讨论】：

您希望下拉列表根据搜索字段中的输入进行过滤吗？或者您对 html 有问题，将输入字段放在下拉列表中？
是的，我希望下拉列表根据输入搜索进行过滤
这个问题和 Jira 有什么关系？

标签： javascript drop-down-menu jira bootstrap-4 search-box

【解决方案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的设置方法见list.js documentation中的示例5。

$(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> 元素。

【讨论】：

【解决方案2】：

感谢大家的帮助，我找到了解决方案。生病在这里为任何需要的人发帖

function searchBox() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}

【讨论】：