在 JQuery 自动完成上使用自定义 CSS 类

Question

我有一个 JQuery 自动完成文本框。我有一个 CSS 样式表，它定义了 on-focus（比如 .custom-focus）和 on-hover（比如 .custom-onhover）元素的主题。样式表可以根据用户主题选择而改变。 我了解 JQuery 自动完成使用诸如“ui-state-focus”之类的类来设置自动建议元素的样式。我需要用我自己的类替换这个类，以便它与主题匹配，并且更改样式表会更改整个 jquery 自动完成主题。 （因此，我不能简单地覆盖默认的自动完成类）。我通过以下代码行实现了这个悬停：

$(element).autocomplete({
            source: function (request, response) {...})
            focus: function (event, ui) {
                event.preventDefault();
// adding this class gives desired result, and show correct styling on hover
                $(".ui-autocomplete li a").addClass("custom-onhover");
                if (ui != null) {
                    $(element).val(ui.item.value);
                }
            });

但是，当用户通过键盘上/下箭头键选择元素时，我找不到获得相同体验的方法。

Answer 1

我终于能够通过将焦点修改为：

 $(".ui-autocomplete li a").removeClass("ui-corner-all");
 $(".ui-autocomplete li a").addClass("custom-onhover"); 
 $(".ui-autocomplete li a").removeClass("custom-focus"); 
 var focussedElement = $(".ui-autocomplete .ui-state-focus"); 
 focussedElement.removeClass("ui-state-focus"); 
 focussedElement.addClass("custom-focus");