Jquery オートコンプリートを使用しており、カスタム フォーカス メソッドを作成しました。目標は、要素がフォーカスされている間に追加情報を表示し、ぼかし時に要素をデフォルトの状態に戻すことです。オートコンプリートにはぼかしメソッドが組み込まれていないため、mouseleave を使用して独自のものをハックしました。
focus: function( event, ui ) {
event.preventDefault();
var menu = $(this).data("uiAutocomplete").menu.element;
var focused = menu.find("li:has(a.ui-state-focus)");
var child = $(focused).children().first();
var item = ui.item.value;
var text = "<div>" + item.name + "</div>";
if (item.publications.length > 0) text += "<div>" + item.publications + "</div>";
$(child).html(text).attr("name", item.name);
$(focused).on("mouseleave", function() {
$(child).html($(child).attr("name"))
});
},
これはマウスのロールオーバーで機能しますが、ユーザーがキーボードを使用してリストを上下に移動する場合は機能しません。そのためには、focusout のようなものを使用する必要があります。
$(focused).on("focusout", function() {
$(child).html($(child).attr("name"))
});
残念ながら、focusout には明らかな効果はありません。エラーメッセージも、変更されたテキストもありません。マウスオーバーでも。何が起こっているのか分かりますか?