Twitterブートストラップオートコンプリートドロップダウン/ Knockoutjsを使用したコンボボックス

2012年10月16日に質問されました。  ·  閲覧回数 312.1k回  ·  ソース

Krishna Teja Veeramachaneni picture
2012年10月16日

ブートストラップオートコンプリートドロップダウンを使用する必要があるという要件がありますが、ユーザーは必要に応じてそのドロップダウンに自由形式のテキストを含めることができます。 TypeAheadについて考える前に、Bootstrap TypeAheadテキストボックスを使用できますが、ユーザーが何を検索すればよいかわからない場合に備えて、ヘッドスタートオプションとしていくつかのデフォルト値を指定するため、ドロップダウンが必要です。

これをMVCDropDownListForで使用しているので、選択コントロールが作成されます。

私は私のためにそれをするこの記事を見つけました。

https://github.com/danielfarrell/bootstrap-combobox/pull/20

私がしなければならなかったのは、selectコントロールから名前を削除することだけで、コントロールは自由形式のテキストを入力させてくれました。 これまでのところすべて良いです。

現在、これをKnockoutjsと組み合わせて使用​​しています。 オプションと選択した値を選択コントロールにバインドし、テンプレートのレンダリングされた行で、(selector).combobox()を呼び出しました。これにより、選択コントロールがブートストラップコンボボックスになり、入力コントロールが追加され、シーン内の選択コントロールが非表示になります。後ろに。

問題は、サーバーに送信する値を取得しようとしたときです。入力ボックスに入力した値は、コントロールを選択するために指定したオプションの有効なオプションではないため、デフォルトでは常に最初のオプションに設定されています。 これは、bootstrap-combobox.jsによって作成された入力ボックスではなく、selectコントロールで選択された値のバインディングを設定したためです。

私の質問は、selectコントロールがバインドされているのと同じプロパティに入力ボックスをデータバインドする方法です。

他のオプションはありますか? さらに詳しい説明が必要な場合や質問がある場合はお知らせください。 提案してください。

ありがとう。

回答

Arnold Daniels picture
2012年10月16日
255

Select2 forBootstrapをご覧ください。 それはあなたが必要とするすべてをすることができるはずです。

もう1つの良いオプションはSelectize.jsです。 Bootstrapにもう少しネイティブに感じます。

Juto picture
2013年08月01日
24

基本的なHTML5データリストは機能しますか? それはきれいで、厄介なサードパーティのコードをいじくり回す必要はありません。 W3SCHOOLチュートリアル

MDNドキュメントは非常に雄弁で、例を示しています。

Mahesh picture
2014年11月11日
3

Bootstrap3ネイティブプラグインのSelect2

https://fk.github.io/select2-bootstrap-css/index.html

このプラグインはselect2jqueryプラグインを使用します

nuget

PM>インストール-パッケージ選択2-ブートストラップ

Stas Slabko picture
2013年08月14日
1

Fuel UXコンボボックスには、期待するすべての機能があります。

user4237179 picture
2015年05月12日
1

http://www.jqueryscript.net/form/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest.htmlを提案できますか?それはあなたにリストを与えるTwitter投稿提案のように機能し

ここでデモを見る: http

これでは、@と#を好きなように簡単に変更できます

Spaceploit picture
2016年01月22日
0

Bootstrap Tokenfieldも良さそうです: http ://sliptree.github.io/bootstrap-tokenfield/