jQuery UIのAutocompleteでIME変換中はサジェストしないようにする
日本語環境ならではの「あるある」のようです。
keydownとkeyupのkeyCodeを見て制御する方法を試すもうまく動かず。
compositionstart/compositionendイベントを見るのが良さげです。
jqueryUIのautocompleteを日本語確定後に実行させる方法 at softelメモ
ただ、compositionstartの時点でautocompleteをdisableするだけでは、
サジェストの候補は取得しにいってしまうという点。
「取得までは行うが、結果は表示しない」という挙動のようです。
- 日本語入力を開始 (確定しない)
- compositionstartイベントが発生、autocompleteをdisable
- autocompletesearch イベントが発生
- autocompleteのsource取得
- autocompleteresponse イベントが発生
- autocompleteopen イベントは発生しない (候補を表示しない)
候補リストのsourceがローカルデータであればこのままでも良いのですが、
リモートからajaxで取得する場合、余計な通信が発生してしまいます。
source取得の前にキャンセルしたいところです。
APIリファレンスによれば検索前というのは search イベントでフックできるので、
composition の状態を見て続行可否を判定すれば良さそうです。
Autocomplete Widget | jQuery UI API Documentation
$(function() { // IME入力中かどうか var composition = false; // Autocomplete の対象(仮) var $target = $('#target'); $target .autocomplete({ // IME入力中でなければ続行 search: function(event, ui) { return !composition; }, source: function(request, response) { // データ取得までに5秒かかる処理(ダミー) setTimeout(function() { response(['Ant', 'Beetle', 'Cicada']; }, 5000); } }) // IME入力の開始を記憶 .on('compositionstart', function(event) { composition = true; $target.autocomplete('disable'); }) // IME入力の終了を記憶 .on('compositionend', function(event) { composition = false; $target.autocomplete('enable').autocomplete('search'); }); });
求める挙動になりました。
UI上は分からないので開発者ツールでの確認が必要ですね。