jQuery和Bootstrap文本字段,用于在单击按钮时过滤下拉列表

时间:2017-06-23 14:10:31

标签: jquery html css twitter-bootstrap

我正在尝试创建一个搜索框。当用户点击搜索时,根据输入的字符,它会在可以选择的下拉列表中显示匹配结果。当用户选择项目时,它会在输入框中填写表单提交。请参阅下面我需要的图片。我正在使用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

1 个答案:

答案 0 :(得分:0)

你可以试试这个:

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

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