如何制作可搜索的下拉列表

问题描述：

我这里拿了代码：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下拉类。

任何人都请帮助我。

您是否希望下拉列表根据搜索字段中的输入进行过滤？或者你有问题的HTML，将输入字段放在下拉菜单中？ –

是的，我想下拉列表根据输入搜索过滤 –

这个问题与Jira有什么关系？ – Maitrey684

答

当我想对列表进行排序时，我使用了list.js。下面是如何，你可以与具有列表的自举-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：查看示例5在list.js documentation上如何设置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>元素。

答

感谢家伙的帮助，我找到了解决办法。生病后在这里为任何需要的人

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

     } 
    } 
}

如何制作可搜索的下拉列表

相关推荐