1. ホーム
  2. autocomplete

[解決済み] Knockoutjsによるtwitterブートストラップオートコンプリートドロップダウン/コンボボックス

2022-05-17 10:17:29

質問

ブートストラップのオートコンプリートドロップダウンを使用しなければならないのですが、ユーザーが希望すれば、ドロップダウンにフリーフォームテキストを入力することができる、という要件があります。TypeAhead について考える前に、私は Bootstrap TypeAhead textbox を使用することができましたが、ユーザーが何を検索したらよいかわからない場合に備えて、いくつかのデフォルト値をヘッドスタートオプションとして与えたいので、ドロップダウンを使用する必要があるのです。

MVCのDropDownListForは選択コントロールを作成するので、私はこれを使用しています。

私はこの記事を見つけ、それが私のために行われます。

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

私は、選択コントロールから名前を削除するだけで、コントロールはフリーフォームのテキストを入力できるようになりました。これまでのところ、すべて順調です。

さて、私はこれをKnockoutjsと組み合わせて使っています。オプションと選択した値を選択コントロールにバインドし、テンプレートのレンダリング行で (selector).combobox() を呼び出し、選択コントロールをブートストラップの comobox にして入力コントロールを追加し、選択コントロールを裏で隠しています。

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

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

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

ありがとうございます。

どのように解決するのですか?

以下のサイトをご覧ください。 Bootstrap 用 Select2 . これで必要なことはすべてできるはずです。

もう一つの良い選択肢は Selectize.js . Bootstrapの方が少しネイティブな感じがします。