JqueryUI自动完成项目焦点使用箭头键不起作用

Question

在我的jQuery自动完成窗口小部件中，由于某种原因，使用鼠标正确选择列表项，鼠标悬停事件也适用于应用CSS并适当更改项目背景。但是，当使用箭头键导航自动完成列表时，项目不会聚焦。它确实执行默认操作并使用项目的值填充输入框（我已阻止此默认操作以便不填充输入框）但该项目未聚焦（请参见屏幕截图）。

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 + ')');
        }

    });
}

在屏幕截图中，我按下箭头键3次，目前第三项应该已经集中，但事实并非如此。

Answer 1

默认情况下，自动填充使用以下CSS突出显示活动元素：

.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;
}

尝试将所有这些类添加到您自己的CSS中。 在你的情况下：

.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;
}