EasyAutocompleteを5行で日本語入力変換に対応させる

オートコンプリート機能は日本語変換に対応していない

EasyAutocomplete:http://easyautocomplete.com/guide#sec-functions

ドキュメント通りに実装してみる。

hoge.js

  var options = {
    data: yakinikuData,
    getValue: "name",
    list: {
      match: {
        enabled: true
      },
    },
  };

  let autocomplete = $("#autoComplete");
  autocomplete.easyAutocomplete(options);

ローマ字だけなら問題ない。動く。

日本語変換してしまうと、狙い通りに動かない。

変換後の「焼肉」で検索したいのに、「やきにく」で検索される。

解決策

参考：https://github.com/pawelczak/EasyAutocomplete/issues/236
参考：https://developer.mozilla.org/ja/docs/Web/Reference/Events/compositionend
以下を追加する。

hoge.js

  var options = {
    data: gon.gurunavis,
    getValue: "name",
    list: {
      match: {
        enabled: true
      },
    },
  };

  let autocomplete = $("#autoComplete");
  autocomplete.easyAutocomplete(options);

  // 以下を追加
  autocomplete.on('compositionend', function () {
    let evt = jQuery.Event("keyup");
    evt.keyCode = 41;
    autocomplete.trigger(evt);
  });

動いた