web-dev-qa-db-ja.com

Knockoutjsを使ったtwitterブートストラップのオートコンプリートドロップダウン/コンボボックス

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

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

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

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

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

今、私はKnockoutjsと一緒にこれを使っています。オプションと選択した値を選択コントロールにバインドしてから、テンプレートのレンダリングされた行で（select）.combobox（）を呼び出して、選択コントロールをブートストラップコモボックスにし、入力コントロールを追加してシーン内で選択コントロールを非表示にします。後ろに。

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

私の質問は、選択コントロールがバインドされていたのと同じプロパティにデータバインドするための入力ボックスをどのように取得するかです。

その他のオプションもっと明確にする必要があるか質問があるかどうか私に知らせてください。提案してください。

ありがとう。

autocompletecomboboxtwitter-bootstrapknockout.jshtml.dropdownlistfor
108
Krishna Teja Veeramachaneni

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

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

248
Jasny - Arnold Daniels

基本的なHTML5データリストは機能しますか？それはきれいで、あなたは面倒な第三者コードで遊ぶ必要はありません… W3SCHOOLチュートリアル

20
Juto

Bootstrap 3ネイティブプラグイン用のSelect2

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

このプラグインはselect2 jqueryプラグインを使用しています

軽い

PM>インストールパッケージSelect2-Bootstrap

4
Mahesh

Fuel UXコンボボックス はあなたが期待する全ての機能を持っています。

1
Stas Slabko

私が提案することができます http://www.jqueryscript.net/form/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest.html 、Twitterの投稿のように動作します@または＃タグに基づいてユーザーまたはトピックのリストが表示される場所を提案します。

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

これであなたは簡単にあなたが望むものに@と＃を変えることができます

1
user4237179

Bootstrap Tokenfieldもいいようです： http://sliptree.github.io/bootstrap-tokenfield/

1
Spaceploit