jQueryのオートコンプリート：フォーカスがあるアイテム

Question

にスタイルを適用することはできません私は（簡体字）その

<input id="name-srch" type="text" data-type="string">

そして、私のjsのような単純な入力を持って

$('#name-srch').autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: ..., 
      data: ..., 
      success: function (data) { 
       // note that 'data' is the list of elements to display 
       response(data) 
      } 
     }); 
    }, 
    select: function (event, ui) { 
     // do some stuff 
     return false 
    }, 
    focus: function (event, ui) { 
     console.log(ui.item.Name) // just to see if the focus event is triggered, and it is 
     return false 
    } 
}) 
.autocomplete("instance")._renderItem = function (ul, item) { 
    return $("<li>") 
     .append("<a>" + item.Name + "</a>") 
     .appendTo(ul); 
}; 

jQueryのオートコンプリートはと<ul>を埋めます<li>sのようにして、マウスオーバーまたは上/下矢印キーでフォーカスイベントをトリガします。問題は私のCSSで私は私の問題があることが

.ui-state-focus { 
    background-color: red; 
    font-weight: bold; 
} 

のようなものを持っているので、私は、フォーカスがあるアイテムに特定のスタイルを適用したいということです

、フォーカスがあるアイテムはui-state-focusクラスを取ることはありませんし、したがって、定義されたスタイルは決して使用されません。

私が間違って何をやっている:(

EDIT：？は、私はすでに私のCSSに

.ui-menu-item:hover { 
    background-color: red; 
    font-weight: bold; 
} 

のようなものを追加しようとしました確かにそれはホバーのためではなくのためのトリックを行いますまた、私はそれが本当に好きではない、私はそれが意味するように意味するように動作させることを好むだろう...

Answer 1

私はそれを動作させることができました。 jQueryのオートコンプリートが集中<li>にui-state-focusは適用されませんが、集中<li>内部<a>にui-state-activeクラスを適用しないいくつかの理由

。したがって、私は、私はまだそれがすべてのドキュメンテーションに説明するように内部だけではなく<li>上<a>上のクラスが適用されますが、ちょっと、それが動作する理由はわかりません

.ui-state-active { 
    background-color: red; 
    font-weight: bold; 
} 

を経由して、希望のスタイルを適用することができます...

Answer 2

おそらく別の方法は、これを追加することですjavascriptでliにクラスを追加し、いくつか追加しますあなたが別のレンダリングjqueryのオートコンプリートがあなたのためにホバーをやっていません設定されているので、この

.li-hover:hover { 
    background-color: red; 
    font-weight: bold; 
} 

のようなものは、私が考える推測として、トリックを行う可能性があります。

Answer 3

は、このセレクタを試してみてください。

.ui-menu .ui-menu-item:hover, .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { 
    background-color: red; 
    font-weight: bold; 
} 

私が答えてきた別の質問からJSFIDDLEがあります。更新

https://jsfiddle.net/g4bvs0we/5/

：：ちょうどCSSの定義の最後の行を確認し、私は、ソースコードとjsfiddleリンクを更新しました。私は、CSSのルールの優先順位に問題があったと思うし、もっと具体的なルールを置くと役立つはずです。

どうすれば教えていただけますか？

Answer 4

私が使用してこれを固定：うん、私はそれについて考えて、（多分その言及を持たなければならない）、既にこれを試してみました

.ui-autocomplete { 
    .ui-state-focus { 
     border: 0px !important; 
     background: #yourcolour !important; 
     color: #yourcolour !important; 
    } 
}