kooh-q-hook

いわゆる一つの技術メモ

jQuery UIのAutocompleteでIME変換中はサジェストしないようにする

日本語環境ならではの「あるある」のようです。

keydownとkeyupのkeyCodeを見て制御する方法を試すもうまく動かず。
compositionstart/compositionendイベントを見るのが良さげです。

jqueryUIのautocompleteを日本語確定後に実行させる方法 at softelメモ

ただ、compositionstartの時点でautocompleteをdisableするだけでは、
サジェストの候補は取得しにいってしまうという点。

「取得までは行うが、結果は表示しない」という挙動のようです。

  1. 日本語入力を開始 (確定しない)
  2. compositionstartイベントが発生、autocompleteをdisable
  3. autocompletesearch イベントが発生
  4. autocompleteのsource取得
  5. autocompleteresponse イベントが発生
  6. 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上は分からないので開発者ツールでの確認が必要ですね。