ボタンをクリックしたときにドロップダウンをフィルタリングするjQueryとBootstrapのテキストフィールド

Question

検索ボックスを作成しようとしています。ユーザーが検索をヒットすると、入力された文字に応じて、一致する結果が選択可能なドロップダウンに表示されます。ユーザーが項目を選択すると、フォーム提出の入力ボックスに入力されます。私が必要とするものの下の画像を参照してください。私はjQueryとBootsrapを使用していますが、私はそれを行かせることはできません。

Heres my code。私は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/

これは検索ボックス/ドロップダウンのためのはるかに強力なプラグインですと機能をたくさん持っています。私は私が取り組んでいるプロジェクトのためにそれを使用してきました、そして、それはフィルタリングのために非常に便利です。