我有一个JQuery自动完成文本框。我有一个CSS样式表,它定义了焦点(例如.custom-focus)和悬停(例如.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);
                }
            });


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

最佳答案

我终于可以通过将焦点修改为以下内容来解决此问题:

 $(".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 - 在JQuery自动完成功能上使用自定义CSS类,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20215391/

10-12 12:47
查看更多