jQuery 自动完成：使用键箭头时未将 CSS ui-focus-state 类添加到聚焦项

Question

通常，在使用 jQuery Autocomplete 时，可以使用键浏览显示的列表项。如果当前使用箭头键选择的项目要使用 CSS 设置样式，我会这样做：

.ui-state-focus {
   background-color: blue;
}

这每次都对我有用。

目前，在 jQuery UI - v1.12.0 中，ui-state-focus当使用箭头键选择该类时，该类不会添加到列表元素中。

我以自定义方式呈现项目，如下所示：

return $('<li>')
    .attr('data-id', item.id)
    .attr('tabindex', '-1')
    .append(appendItem) /* Text content of the item */
    .appendTo(ul);

我知道这可能与我使用的 jQuery UI 版本无关。但我不明白为什么ui-state-focus没有添加到我的项目中，所以我可以设置焦点状态的样式。

更新

此外，当我autoFocus: true在自动完成配置中使用该属性时 - 它根本不起作用。它应该关注显示的第一个列表元素，但它什么也不做。更改其他属性（如delay）工作正常。

Answer 1

它实际上与您使用的 jquery-ui 版本有关。他们提到了 v1.12 升级指南中的变化。

https://jqueryui.com/upgrade-guide/1.12/#use-consistent-styling-for-focused-and-active-items

我们曾经使用 ui-state-active 来设置活动父菜单项的样式，而其他所有内容都使用ui-state-focus（或 ui-state-hover，我们的样式与焦点相同）。当子菜单中的菜单项具有焦点时，父菜单项会变为 ui-state-active，这是不一致且令人困惑的。我们现在已经切换到只使用 ui-state-active 类。