Как я могу изменить пользовательский интерфейс в окне автозаполнения JQuery?

Question

У меня есть текстовое поле автозаполнения jquery.

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

Спецификация показывает это:

Срабатывает при открытии меню предложений.Примеры кода

Предоставить функцию обратного вызова для обработки события открытия в качестве опции init.

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

У меня есть этот точный код, и он работает нормально, но в функции я хочу стилизоватьПервый элемент списка.

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

Я не могу понять, что такое пользовательский интерфейс или как его использовать.Я не могу использовать firebug, потому что всплывающее диалоговое окно исчезает, как только я нажимаю на панель инструментов firebug

Answer 1

Этот селектор должен работать:

ul.ui-autocomplete li:first-child

С ним можно создать правило CSS.

Answer 2

Попробуйте предупредить $(ui).html() и посмотрите, что в нем содержится, тогда вы можете использовать правильный селектор.

Answer 3

ui будет содержать только предложение, которое было выбрано. Чтобы получить выбранный предмет, вы можете использовать:

var value = ui.item.value;

Чтобы оформить его, вам нужно подумать о другом, например:

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

Редактировать: Вот почему пользовательский интерфейс равен нулю, когда вы просто предупреждаете его, ничего не выбирая.

Answer 4

Если вы посмотрите в конце документации, есть раздел по тематике. Я считаю, что это дает представление о том, что можно сделать.

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

Answer 5

Когда я использую «Inspect Element» для опции, я получаю <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">c++</a></li>, поэтому вы можете попробовать стилизовать классы li или a.