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