115

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

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

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

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

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

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

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

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

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

ありがとう。

4

6 に答える 6

255

ブートストラップ用のSelect2をご覧ください。それはあなたが必要とするすべてを行うことができるはずです。

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

于 2012-10-16T12:31:57.193 に答える
26

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

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

于 2013-08-01T15:40:33.873 に答える
3

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

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

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

nuget

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

于 2014-11-11T05:58:03.057 に答える
1

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

于 2013-08-14T13:09:23.170 に答える
1

http://www.jqueryscript.net/form/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest.htmlを提案できますか?@または#タグに基づくユーザーまたはトピックの数、

ここでデモを見る:http ://www.jqueryscript.net/demo/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest/

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

于 2015-05-11T19:43:46.843 に答える
0

ブートストラップトークンフィールドも良さそうです:http ://sliptree.github.io/bootstrap-tokenfield/

于 2016-01-21T18:50:06.190 に答える