typeahead.js でマウスイベントを取得する方法

メモ。
Twitter が開発している typeahead.js(v0.10.2) を使っていて、表示されたリストの中からマウスのカーソルを移動させたら、選択中の項目を取得したい。


typeahead.js には Custom Eventsというのでイベントをフックできる。
この中に、typeahead:cursorchanged というのがあって、こいつを使えばカーソルの移動イベントが取得できると思っていた。
が、typeahead:cursorchanged で取得できるのはキーボードの矢印キーでの移動のイベントのみ。
マウスカーソルの移動イベントは取得できない。


てっとり早くマウスカーソルで、項目の移動イベントを取得するには以下のようにする。

  $('.tt-dropdown-menu').on(
    'mouseenter.tt', '.tt-suggestion', function (e) {
      console.log(e); 
    }
  );

余談

色々イベントを試していて、typeahead:opened のイベントがドキュメントと合ってない事を発見した。
ドキュメントには

Triggered when the dropdown menu of a typeahead is opened.

と書かれているが実際はテキストボックスにフォーカスがあたった瞬間にイベントが発火する。

Issues にとっくにあがっていて、その 0.10.3 で改善したいとの事。
Add dropdownShown and dropdownHidden events. by utatti · Pull Request #700 · twitter/typeahead.js · GitHub
Clarify what open/close means · Issue #759 · twitter/typeahead.js · GitHub