JqueryUI Autocomplete Element Fokus funktioniert nicht mit den Pfeiltasten

Question

In meinem jQuery Autocomplete-Widget, aus irgendeinem Grund, die Listenelemente richtig mit der Maus ausgewählt und das Maus-Hover-Ereignis funktioniert auch, um die CSS anwenden und Hintergrund entsprechend ändern. Wenn Sie jedoch mit den Pfeiltasten in der Autocomplete-Liste navigieren, wird das Objekt nicht fokussiert. Es führt die Standardaktion aus und füllt das Eingabefeld mit dem Wert des Elements (ich habe diese Standardaktion verhindert, um das Eingabefeld nicht zu füllen). Das Element ist jedoch nicht fokussiert (siehe Screenshot).

CSS:

.ui-menu-item:hover{ 
    cursor: pointer; 
    background: #D6DFF2; 
} 

Javascript:

$.widget("ui.autocomplete", $.ui.autocomplete, { 
options: { 
    maxItems: 2 
}, 
_renderMenu: function (ul, items) { 
    var that = this, 
     count = 0; 
    $.each(items, function (index, item) { 
     if (count < that.options.maxItems) { 
      that._renderItemData(ul, item); 
     } 
     count++; 
    }); 
} 
}); 

var initializeAutoComplete = function() { 
    $('#example-links').autocomplete({ 
     source: $('#hidden-action-autoComplete').val(), 
     maxItems: 10, 
     delay: 750, 
     minLength :1, 
     select: function (event, ui) { 
      event.preventDefault(); 
      $(this).val(ui.item.label); 
      window.location = '/path/to/be/shown/' + ui.item.value; 
     }, 
     focus: function (event, ui) { 
      event.preventDefault(); 
      $('.ui-autocomplete > li').attr('title', ui.item.label + '(' + ui.item.value + ')'); 
     } 

    }); 
} 

Im Screenshot, ich habe Pfeiltaste 3 mal nach unten gedrückt und zur Zeit der dritte Punkt fokussiert werden soll, aber es ist nicht.

Answer 1

standardmäßig automatische Vervollständigung verwendet das folgende CSS das aktive Element zu markieren:

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { 
    border: 1px solid #999999; 
    background: #dadada url("images/ui-bg_glass_75_dadada_1x400.png") 50% 50% repeat-x; 
    font-weight: normal; 
    color: #212121; 
} 

Versuchen Sie, alle diese Klassen zu Ihrer eigenen CSS hinzufügen. In Ihrem Fall:

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { 
    cursor: pointer; 
    background: #D6DFF2; 
}