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


114

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

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

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

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

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

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

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

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

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

ありがとう。


私は自分の状況の解決策を見つけました。オートコンプリートコモボックスの代わりにTypeAheadテキストボックスを使用し、ユーザーがコントロールにフォーカスしたり、ボタンを押したりしたときに、デフォルトでオプションのドロップダウンを表示しました。そうすれば、彼らは何を探すことができるかを知っています。
Krishna Teja Veeramachaneni 2012年

回答:


254

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

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


27
Select2をどのように使用して、まだデータソースに含まれていないテキスト入力を許可しましたか?
中央

4
@compcentralが正しく言及したように、Select2はオプションリストにないものを入力することを許可しません。(自動)タグ付け機能を使用してこれをシミュレートすることは、内部にスペースがあるテキストを受け入れないため、面倒です。
Stas Slabko 2013

2
なんて良い発見だ!最終的にSelectizeを使用するようになりました。これは、Bootstrap風に見えるからです。
スティーブン

1
@compcentralとStasによって指摘された問題のため、selectize.jsを使用することにしました。
Neil Monroe 14

1
@compcentralリモートデータソースメソッドを使用しないのはなぜですか?
Clain Dsilva、2015年

23

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

MDNドキュメントは非常に説得力のあると例を提供しています。


3
HTML 5の主な問題datalistは、DOMイベントをサポートしないことです。したがって、値を選択するたびに、対応するテキストボックスからタブで移動する必要があります
Pawan

@Pawanそれは真実ではありません(もう?)。データリストにリンクされた入力は、少なくとも変更と入力イベントを発生させます。ここを見てください。変更イベントと入力イベントの両方がコンソールログを発生させます。
フェリックス・ガニオン-グルニエ

1
これらすべての年。代わりに、シンプルでクリーンな既にサポートソリューションのサードパーティのライブラリをいじりすべてのこれらの年...
フェリックス・ガニオン-グルニエ



1

私は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/

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


0

ブートストラップTokenfieldも良いようです:http ://sliptree.github.io/bootstrap-tokenfield/

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.