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类。

Answer 2

您需要在li中添加子DOM元素，例如：

<li><div class="ui-menu-item-wrapper"></div></li>

这个包装器现在将获得 ui-state-active 类（在此类被称为 ui-state-focus 之前），您可以在CSS中设置样式，否则当包装器丢失时，这个状态不会应用于所选行，这也是对以前的jQuery UI自动完成版本的更改。

Answer 3

使用键箭头时，需要为添加到焦点项的ui-focus-state类自定义js（v1.12）

这样的自定义方式：

Step 1:
                   focused = this.active.children( ".ui-menu-item-wrapper" );
                   this._addClass( focused, null, "ui-state-active" );
    **Replace with**:
                    focused = this.active.closest( ".ui-menu-item" );
                    this._addClass( focused, null, "ui-state-focus" );

Step 2:
                   activeParent = this.active.parent().closest( ".ui-menu-item" ).
                   children( ".ui-menu-item-rapper" );
                   this._addClass( activeParent, null, "ui-state-active" ); 
    **Replce with**:
                   activeParent = this.active.parent().closest( ".ui-menu-item" );
                   this._addClass( activeParent, null, "ui-state-focus" );

Step 3:           this._removeClass( this.active.children( ".ui-menu-item-wrapper" )
                  ,null, "ui-state-active" );

   **Replace with** :
                  this._removeClass( this.active.closest( ".ui-menu-item" ),
                  null, "ui-state-focus" );

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

3 个答案: