課題

会社でAngularJSを使っていて、下のような「画像つきのオートコンプリート」をやりたいという話がでました。

テキストを表示するだけのオートコンプリートであればこれまでも運用していて、allmighty-autocompleteというライブラリを利用していたのですが、それぞれのセル（？）に画像を表示するなどのカスタマイズはできなさそうだったので、別のライブラリを探すことにしました。

解決

angucomplete-altというライブラリを採用したのですが、結論からいうと、自身のgithubのレポジトリにforkして修正加えたものを使うことになりました（PRはもちろんしたのですが、後述するように日本語IMEという稀なケースであること＋実装的にイケてなかったため、PRは通らなかった・・・）。

forkしたもの

厄介な日本語IME

どこに修正を加えたかというと、angucomplete-altでは**日本語IMEがオン状態で、日本語変換中のものを確定したときに検索が開始されない（イベントが発生しない）**という問題があって、ユーザビリティ的には致命的なものでした。これまで使用していたallmighty-autocompleteでは起きなかったのに・・・。

余談ですが、こういった文字の入力系のライブラリは、この日本語IME問題に結構ぶち当たるなぁという所感をもっていて、別のAngularのモジュールでもStackOverflowで質問したことがある(これはsafariのみで発生した問題。一度は作者の方が拾ってくれたが・・・)。

トリガーのタイミング

これまで使っていたallmighty-autocompleteで問題がなかったのは、検索開始のイベントのトリガーが、以下のように$watchで値自身の変更を見ているから。

"allmighty-autocomplete"から抜粋

$scope.$watch('searchParam', function(newValue, oldValue) {
  //...検索処理
}

新しく採用したangucomplete-altではキーアップがトリガーになっていて、Enterキーのキーアップは別の処理にもっていかれてしまうため、検索処理がはじまらないみたいなことが起きていた。

"angucomplete-alt"から抜粋

function keyupHandler(event) {
  //...検索処理
}

「どのキーがどのような順で押されたか」から日本語IMEの状態を判定することもできるのかもしれませんが、安定性を優先して$watchでの対応を組み込んだ（これがforkしたレポジトリで行ったこと）。$watchによるパフォーマンス低下については認識しているつもりだけど、今回のケースでいうとテーブルセルのようにたくさん使われるものではないので問題なしと判断した。また実装としては冗長な格好になってしまったが、根本からつくりなおさないとダメだったのでこうなっています。

結論

AngularJSの標準のモジュールとしてオートコンプリートは入ってほしい。

注意

ここで書いていることは、実装開始はこれを書いてる1,2ヶ月前に遡るので、もっと良いライブラリがあったら申し訳ございません。
またライブラリのバージョンも、あくまでこういったことがあったよ〜という個人メモなので特に記していないです。申し訳ございません。