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

Tweet

Category JavaScript 2015/11/06

問題

jquery.ui の autocomplete で、日本語入力が未確定の状態でも候補が表示されてしまい、邪魔だといわれました。

日本語入力中は候補を出さないで、日本語入力が確定してからautocompleteできないでしょうか。

http://jqueryui.com/autocomplete/

答え

DEMO まず普通のautocomplete

（「あ」「か」など入力してみてください）

昔のjquery ui なら、以下のようにすれば、未確定中に候補を出さないようにできた。

//昔はこんなことをした例。今はダメ。
$('#hoge').autocomplete({
（略）
        search: function(event, ui) {
          //firefoxは未確定中にキーイベントが発生しない
          //firefox以外は未確定中のキーイベントのkeyCodeが229になるのでこれでキャンセル
          if (event.keyCode == 229) return false;
          return true;
        },
（略）
});

最近のjqueryuiはinputイベントを拾ってしまうので、これでは阻止できなくなった。

ここで、最近のブラウザであれば、日本語入力開始、終了のイベント compositionstart、compositionend が使えるので、これで阻止してみようと思う。

DEMO 日本語入力未確定中は動かないautocomplete

（「あ」「か」など入力してみてください）

jquery ui autocomplete のオプションで頑張ろうとすると詰まるが、外からautocompleteを有効化、無効化してやると簡単。

JavaScript

<script>
//jQuery UI 1.11で確認
$(function(){

    //autocomplete はごく普通に設定する
    $('#demo').autocomplete({
        source:["あいうえお","あかさたな","ああああ","あうん","あえいうえおあお","あんぱんまん","かあ","きい","くう"]
    });

    //日本語入力をスタートしたら無効化
    $('#demo').on('compositionstart', function(){$('#demo').autocomplete('disable');});

    //日本語入力が確定したら有効化
    $('#demo').on('compositionend', function(){$('#demo').autocomplete('enable').autocomplete('search');});

    //↑ IEでは、compositionendの後にinputイベントが発生しないようなので
    //IEでも確定後すぐ候補が出て欲しい場合は、わざとsearchを呼ぶ
    //IEは考慮しなくてよかったら、後ろの .autocomplete('search') は省略してよい
});
</script>

compositionstart、compositionend に対応していない古いIEなどでは、未確定中でもバシバシ候補が出てくる通常通りの動きをする。

メモ

仕様の変化に伴って、Eventの種類も多様になってますね。

https://developer.mozilla.org/en-US/docs/Web/Events