单击按钮时过滤下拉列表的 jQuery 和 Bootstrap 文本字段

Question

我正在尝试创建一个搜索框。当用户点击搜索时，根据输入的字符，它会在可以选择的下拉列表中显示匹配的结果。当用户选择该元素时，它会填充到表单提交的输入框中。见下图我需要的东西。我正在使用 jQuery 和 Bootsrap，但我似乎无法运行它。

这是我的代码。我还使用有效的 jquery 切换下拉菜单。

<input list="list" class="form-control" placeholder="Search for item" name="item-search" id="item-search"><span class="input-group-btn"><button class="btn" id="apply-btn" type="button">Apply</button></span>
<ul class="dropdown-menu" role="menu" id="list-dropdown-items"></ul>
<li><a value="value1">value1</a></li>
<li><a value="value2">value2</a></li>
<li><a value="value3">value3</a></li>
<li><a value="value4">value4</a></li>
<li><a value="value5">value5</a></li>
<li><a value="value6">value6</a></li>

textbox with dropdown filter

Answer 1

你可以试试这个:

https://harvesthq.github.io/chosen/

这是一个更强大的搜索框/下拉插件插件，具有很多功能。我一直将它用于我正在进行的元素，它对过滤非常有用。