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

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

感谢大家的帮助，我已经找到了解决方案。我在这里发帖给有需要的人

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";

        }
    }
}