私はjquery-autiの完全なウィジェットのためにjquery-ui 1.9を使用しています。 jqueryオートコンプリートメニュー項目のリストをホバーしている間に、リスト項目の白で背景色を青色とフォント色に変更しようとしています。 cssクラスを追加してリストアイテムをホバリングしながら背景色を変更することができ、フォーカス機能を追加してリストアイテムをホバリングしながらフォント色を変更することもできます。jquery-autocompleteウィジェットから移動した後でどのイベントが発生しますか?
_focus: function (event, ui) {
event.preventDefault();
var htmlString= $('.ui-autocomplete').html();
//Recently unFocused Element
var foundUnFocusedEle = $(htmlString).find('.focusedElement');
if(foundUnFocusedEle.length != 0) {
var unFocusedEleId = $(foundUnFocusedEle).attr('id');
var unFocusedEleHtml = $('#'+unFocusedEleId).html();
if($(unFocusedEleHtml).hasClass('add-search-result-label')
&& $(unFocusedEleHtml).hasClass('add-search-result-sublabel')) {
$('#'+(foundUnFocusedEle).attr('id')).find('.add-search-result-label').removeClass('hover-search-result-label');
$('#'+(foundUnFocusedEle).attr('id')).find('.add-search-result-label').addClass('search-result-label');
$('#'+(foundUnFocusedEle).attr('id')).find('.add-search-result-label').removeClass('add-search-result-label');
$('#'+(foundUnFocusedEle).attr('id')).find('.add-search-result-sublabel').removeClass('hover-search-result-sublabel');
$('#'+(foundUnFocusedEle).attr('id')).find('.add-search-result-sublabel').addClass('search-result-sublabel');
$('#'+(foundUnFocusedEle).attr('id')).find('.add-search-result-sublabel').removeClass('add-search-result-sublabel');
}
$('#'+unFocusedEleId).removeClass('focusedElement');
}
//ui-state-focus
var foundUiStateFocus = $(htmlString).find('.ui-state-focus');
//console.log(foundUiStateFocus);
if(foundUiStateFocus.hasClass('ui-state-focus')) {
//console.log('it has ui-state-focus');
var focusedEleId = $(foundUiStateFocus).attr('id');
//console.log('id: '+focusedEleId);
$('#'+focusedEleId).addClass('focusedElement');
var focusedEleHtml = $('#'+focusedEleId).html();
if($(focusedEleHtml).hasClass('search-result-label') && $(focusedEleHtml).hasClass('search-result-sublabel')) {
//console.log('it has search-result-label');
//console.log($('#'+(foundUiStateFocus).attr('id')).find('.search-result-label'));
$('#'+(foundUiStateFocus).attr('id')).find('.search-result-label').addClass('add-search-result-label');
$('#'+(foundUiStateFocus).attr('id')).find('.search-result-label').removeClass('search-result-label');
$('#'+(foundUiStateFocus).attr('id')).find('.search-result-sublabel').addClass('add-search-result-sublabel');
$('#'+(foundUiStateFocus).attr('id')).find('.search-result-sublabel').removeClass('search-result-sublabel');
$('#'+(foundUiStateFocus).attr('id')).find('.add-search-result-label').addClass('hover-search-result-label');
$('#'+(foundUiStateFocus).attr('id')).find('.add-search-result-sublabel').addClass('hover-search-result-sublabel');
}
}
}
今私はchnagedリスト項目、フォントの色や背景色をホバリングが、私はウィジェットから出てくるとき、またはテキストボックスを検索するために移動したとき。 フォントの色を白色ではなくオリジナルの色で変更する必要があります。 私はmouseout/mouseleave関数を作成しましたが、呼び出されません。 リストの上にマウスを置いてウィジェットから出てきたときに、どのイベント/関数が呼び出されているかを誰かに教えてもらえますか?
私はテストのためにフォークしました:http://jsfiddle.net/4t3v5r6d/ –