Question

我有一个JQuery自动填充文本框。我有一个CSS样式表，它定义了焦点（比如.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");

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

1 个答案: