リモート データソースを含む jQuery UI オートコンプリート テキスト フィールドがあります。オートコンプリートのselectイベントは、次の 3 つのことを行います。
- オートコンプリート リストから選択した値でテキスト フィールドの値を更新します
- ページにさらにデータをロードするために AJAX 呼び出しを行います。
- フォーカスを別のテキスト フィールド (前の手順で作成) に移動します。
テキスト フィールドには、change上記の手順 2 で読み込まれたデータを削除し、オートコンプリートのsearchイベントをトリガーするイベントもあります。
これは IE (バージョン 9 および 10 でテスト済み) では完全に機能しますが、Firefox では機能しません。オートコンプリート リストから選択すると、余分なデータは表示されず (ネットワーク トラフィックを分析すると、AJAX 呼び出しが行われていることが示されます)、オートコンプリートのsearchイベントがトリガーされます。上記のステップ 3 の後で Firefox がテキスト フィールドのchangeイベントをトリガーするまで問題を突き止めることができました。これは、テキスト フィールドに何かを入力してオートコンプリート リストをトリガーしたためと思われます。
簡単な例: http://jsfiddle.net/2umrJ/1
(簡潔にするために、この例でkeyupはテキスト フィールドのイベントを使用しています。)
IE10 での出力:
input1.focus() トリガー
input1.blur() トリガー
input2.focus() トリガー
Firefox 20 での出力:
input1.focus() トリガー
input1.change() トリガー
input1.blur() トリガー
input2.focus() トリガー
ご覧のとおり、Firefox はchangeイベントを発生させますが、IE は発生させません。デフォルトでは (つまり、追加のコードなしで)、値が手動で変更された場合にのみイベントがトリガーされることがわかりましたが、フィールドがフォーカスを失うことなく、手動とプログラムの両方でchange値が変更された場合の正しい動作は何ですか?
また、私の特定のケースでさらに重要なのは、Firefox の動作が正しい (または少なくとも正しくない) 場合、それを防ぐ最善の方法は何ですか? changeオートコンプリート リストから何かを選択した後、フォーカスがプログラムによって変更されたときにイベントがトリガーされるのを避けたいです。