web-dev-qa-db-ja.com

ノックアウトJSでキー押下イベントを使用する

Googleスタイルのオートコンプリートを達成するために、htmlテキストボックスの内容を読み取り、APIからデータを取得しようとしています。オートコンプリート機能にTwitter bootstrap typeaheadを使用しています。そのためには、キーが押されたときにキーを記録し、クエリテキストを使用してAPI呼び出しを行う必要があります。

テキストボックスのhtmlはこちら

<input id="query" data-bind="value: query, valueUpdate: 'keypress', event: { keypress: check }"/>

私の想定では、これはキーが押されるとすぐにビューモデルの値を更新し、その間check関数がAPIを呼び出します。ただし、check（）の呼び出しが行われ、ユーザーが入力したときにテキストボックスに値が入力されることはありません。 JSが次のように見える場合-

function check() {
    alert("Hello");     
    }

押すたびに、こんにちはポップアップが表示されますが、HTML UIのテキストボックスには、押されたキーは表示されません/どのキーが押されたかは記録されません。キー押下を記録し、リクエストを同時に送信するにはどうすればよいですか？

javascriptjqueryhtmltwitter-bootstrapknockout.js
27
divyanshm
  1. クエリが観察可能なものであることを確認してください
  2. 使用する valueUpdate = 'afterkeydown'
  3. 使用する event: { 'keyup': check }:

また、可能であれば、アラートではなくconsole.logを使用し、値が更新されていることを確認できるようにクエリを記録します。 :)また、このようなイベントを記録したい

function check(data, event) {
    console.log(event);
}

それはあなたが押したキーのキーコードを教えてくれます

41
egucciar

このスレッドは古いですが、KOのtextInputバインディングの使用を引用していないことに気付きました。これは、v3.2.0で追加された新機能です。

少なくとも現在（2015年1月）のKOドキュメントは、この問題に特に対処しています。

注1：textInputと値のバインディング

値バインディングはテキストボックスとビューモデルプロパティ間の双方向バインディングも実行できますが、即時のライブ更新が必要な場合はいつでもtextInputを優先する必要があります。

http://knockoutjs.com/documentation/textinput-binding.html を参照してください

29
CSSian