如何在JQuery自动完成框中更改UI？

Question

我有一个jquery自动填充文本框。

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

那里的规范显示了这一点：

打开建议菜单时触发。 代码示例

提供一个回调函数来处理open事件作为init选项。

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

我有完全正确的代码并且工作正常，但在函数中我想要设置第一个列表项的样式。

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

我无法弄清楚ui是什么或如何使用它。我不能使用firebug，因为弹出对话框会在我点击firebug工具栏时消失

Answer 1

尝试提醒$(ui).html()并查看其中包含的内容，然后您可以使用正确的选择器。

Answer 2

此选择器应该有效：

ul.ui-autocomplete li:first-child

您可以使用它创建CSS规则。

Answer 3

当我在选项上使用“检查元素”时，我会<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">c++</a></li>，因此您可能需要尝试设置li或a类的样式。

Answer 4

如果您查看文档的末尾，则有一个关于主题的部分。我相信这可以说明可以做些什么。

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

Answer 5

ui 只会包含所选的建议。要获取所选项目，您可以使用：

var value = ui.item.value;

要设计样式，您需要考虑另一种方式，例如：

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

编辑：这就是为什么当你在没有选择任何内容的情况下提醒它时ui为空。