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

在较新的版本中，CSS 类已更改。如果上述方法不起作用，请尝试使用以下 CSS 选择器：

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover

^{感谢Jack Miller指出这一点}

JqueryUI 自动完成项目焦点无法使用箭头键工作

JqueryUI Autocomplete item focus does not work using arrow keys

jquery

jquery-ui

jquery-ui-autocomplete