在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");