jQueryUIのautocompleteの日本語入力をもうちょっといい感じにする

jQueryUIのAutocompleteの日本語入力をいい感じにする」の記事を参考にautocompleteを実装していたのですが、Chromeでは日本語入力確定時のエンターキーのkeyupイベントが取得できないという問題が発覚したため、少し手を加えてもうちょっといい感じにしようとした話。

で、何が問題かというと

$("#text").autocomplete(
{
    search: function(event, ui)
    {
        if (229 == event.keyCode)
        {
            return false;
        }
        return true;
    }
}).keyup(function(event)
{
    if (13 == event.keyCode)
    {
        $(this).autocomplete("search");
    }
});

元々のソースコードはこんな感じです。何がやりたいのかは元記事を参考にしていただければと思うのですが、簡単に説明すると、

  • search時にキーコードが「229」で有れば実行しない。
  • keyupイベントを取得し、キーコードが「13」(エンター)であればsearchを実行

こうすることによって、IE・Safari・Chromeは日本語入力中のkeydownのキーコードが229になるので最後にエンターが入力されるまではsearchの実行を抑えることができます。FireFoxは日本語入力中のイベントは受け取らないので、日本語入力が完了したkeyupの値でsearchを実行しています。

しかし、Chromeは日本語入力確定時のエンターキーのkeyupイベントが取得できなかったため(仕様?バグ?)、日本語入力が完了してもsearchが実行されないという現象が発生してしまっていたようです。

ということでChromeオリジナルの対応を付け加えました。

とりあえず色々試行錯誤してみたのですが、Chromeのときはあきらめるという処理(暴挙)に落ち着きました。

$("#text").autocomplete(
{
    search: function(event, ui)
    {
        // Chromeのときはあきらめる
        if (navigator.userAgent.indexOf("Chrome") === -1 && 229 == event.keyCode)
        {
            return false;
        }
        return true;
    }
}).keyup(function(event)
{
    if (13 == event.keyCode)
    {
        $(this).autocomplete("search");
    }
});

実際にはsource取得処理を非同期でやっていて、そちらのタイミング処理とかabortとかの方がめんどくさかったのですが。

Chrome以外のブラウザでは素晴らしく入力がいい感じになっていたので、Chromeでも何とかならないかなぁ。

結論

もうちょっといい感じにしたかったのですが、どうにもならなかった。

もっといい感じにする方法があれば、また考えてみる。

コメントを残す