jQuery autocomplete rows highlight on select

Question

I'm using jQuery UI Autocomplete.

When the suggestion box appears and the user presses the Down key (or they move the mouse over one suggestion), I need the entire row to be highlighted. So far, when pressing the Down key, only the background of the hyperlink gets highlighted. I tried styling the ui-state-hover class, but that's only used on the anchor element. I can't figure out how to highlight the li element.

Here's my CSS so far:

.ui-state-hover, .ui-autocomplete li:hover
{
    color:White;
    background:#96B202;
    outline:none;
}

EDIT: To make it a bit more clear, the autocomplete generates its elements like so:

<ul>
<li><a>an element</a></li>
<li><a>another element</a></li>
</ul>

when the down key is pressed, the anchor element automatically gets the class ui-state-hover.

Answer 1

I had exactly the same problem, solved it by:

.ui-state-focus
{
    color:White;
    background:#96B202;
    outline:none;
}

Answer 2

Being a beginner in CSS, I didn't see this earlier: I only had to make the anchor element's style display:block. In case anyone ever runs into this again.

Answer 3

You can use events:

yourElement.autocomplete({
        focus: function(event, ui) { console.log(var li = $(event.srcElement).parent()); },
});

li variable is what you need. You can change style or add class the way you like.