How can I alter the UI in a JQuery autocomplete box?

I have a jquery autocomplete textbox.

http://docs.jquery.com/UI/Autocomplete#events

The spec there shows this:

Triggered when the suggestion menu is opened. Code examples

Supply a callback function to handle the open event as an init option.

$( ".selector" ).autocomplete({
   open: function(event, ui) { ... }
});

I have that exact code and it works fine, but in the func开发者_StackOverflowtion I want to style the first list item.

$(ui).length is 1
$(ui).find('ul').length is 0
$(ui).find('li').length is 0

I can't figure out what ui is or how to use it. I can't use firebug because the popup dialogue disappears as soon as I click the firebug toolbar

This selector should work:

ul.ui-autocomplete li:first-child

You can create a CSS rule with it.

Try to alert $(ui).html() and see what it contains, then you can use the right selector.

When I use "Inspect Element" on an option I get <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">c++</a></li>, so you may want to try styling either the li or a classes.

If you look at the end of the documentation there is a section on theming. I believe this gives an indication of what could be done.

$( ".selector" ).autocomplete({
   open: function(event, ui) { 
       $(".selector").find("li.ui-menu-item:first").css('your style here');
   }
});

ui will only contain the suggestion that was selected. To get the item that was selected, you could use :

var value = ui.item.value;

To style it, you will need to think of another way, for example:

$('.ui-menu-item:first').css('color','red'); 

Edit: That's why ui is null when you simply alert it without selecting anything.