使用jQuery或CSS选择jQueryUI自动完成列表

jQueryUI自动完成创建一个类似于以下内容的

ul

列表。如何使用jQuery或CSS选择

ul

列表？我可以做

ul.ui autocomplete

，但是，我不想在我的页面上选择这个类的每个列表，只想选择一个特定的列表。id（即，

ui-id-1

）是由插件生成的，所以我不能使用这些。我原以为，

open

事件可以让我访问，但事实似乎并非如此

addClass（）

将类添加到

输入中，而不是
ul

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0" style="display: none; width: 140px; top: 30px; left: 8px;">
   <li class="ui-menu-item" id="ui-id-2" tabindex="-1">an apple</li>
   <li class="ui-menu-item" id="ui-id-3" tabindex="-1">a peach</li>
   <li class="ui-menu-item" id="ui-id-4" tabindex="-1">an orange</li>
</ul>


桃子
橙色




测试
$（函数（）{
$（“#自动完成”）。自动完成({
资料来源：[“一个苹果”、“一个桃子”、“一个橘子”]，
最小长度：1，
打开：功能（事件、用户界面）{
日志（'open'，事件，ui，this）；
}
}).addClass（“任何”）；
$（“#autocomplete”）.on（“autocompleteopen”，function（event，ui）{console.log（'autocompleteopen'，event，ui，this）；}）；
});
如果需要用于特定的自动完成，可以使用
\u renderItem
函数覆盖控件的默认呈现。这会将
ul
和
item
传递给它的事件，其中
ul
是渲染的ul元素，而
item
是单个行项目

基本上，您的声明将更改为以下内容：

$("#autocomplete").autocomplete({
    source: ["an apple","a peach","an orange"],
    minLength: 1,
    open: function( event, ui ) {
        console.log('open',event,ui,this);
    }
 }).data("uiAutocomplete")._renderItem = function (ul, item) {
     console.log('renderItem', item);
     $(ul).addClass("whatyouneed");
     var html = "<a>" + item.label + "</a>";
     return $("<li></li>").data("item.autocomplete", item).append(html).appendTo(ul);
 };

$（“#自动完成”）.autocomplete({
资料来源：[“一个苹果”、“一个桃子”、“一个橘子”]，
最小长度：1，
打开：功能（事件、用户界面）{
日志（'open'，事件，ui，this）；
}
}).数据（“uiAutocomplete”）。\u renderItem=功能（ul，项目）{
console.log（'renderItem'，项）；
$（ul.addClass（“whatyouneed”）；
var html=”

如您所见，如果您检查一个
li
元素，则父
ul
会为其分配一个名为“whatyouneed”的类

编辑：类似地，如果您想获取列表中的
ul
，而不查看项目，您只需获取小部件部分（它将返回
ul
），您可以随意操作它。因此，要操作它，您可以使用：
$（“#自动完成”）.autocomplete（“小部件”）.addClass（“yourclass”）

更多信息可在此处的文档中找到：
如果您需要用于特定的自动完成，您可以使用
\u renderItem
函数覆盖控件的默认呈现。这会将
ul
和
item
传递到它的事件，其中
ul
是被呈现的ul元素，而
item>则传递给它的事件是单个行项目

基本上，您的声明将更改为以下内容：

$("#autocomplete").autocomplete({
    source: ["an apple","a peach","an orange"],
    minLength: 1,
    open: function( event, ui ) {
        console.log('open',event,ui,this);
    }
 }).data("uiAutocomplete")._renderItem = function (ul, item) {
     console.log('renderItem', item);
     $(ul).addClass("whatyouneed");
     var html = "<a>" + item.label + "</a>";
     return $("<li></li>").data("item.autocomplete", item).append(html).appendTo(ul);
 };

$（“#自动完成”）.autocomplete({
资料来源：[“一个苹果”、“一个桃子”、“一个橘子”]，
最小长度：1，
打开：功能（事件、用户界面）{
日志（'open'，事件，ui，this）；
}
}).数据（“uiAutocomplete”）。\u renderItem=功能（ul，项目）{
console.log（'renderItem'，项）；
$（ul.addClass（“whatyouneed”）；
var html=”

如您所见，如果您检查一个
li
元素，则父
ul
会为其分配一个名为“whatyouneed”的类

编辑：类似地，如果您想获取列表中的
ul
，而不查看项目，您只需获取小部件部分（它将返回
ul
），您可以随意操作它。因此，要操作它，您可以使用：
$（“#自动完成”）.autocomplete（“小部件”）.addClass（“yourclass”）

更多信息可在此处的文档中找到：
您可以使用CSS：

ul.ui-autocomplete li:last-child a {
  color:red;
}

您可以将CSS用于：

ul.ui-autocomplete li:last-child a {
  color:red;
}

我不完全确定我读对了你的问题-但你想为列表中的每一项设置样式吗？@ENTROPICT我的愿望是为最后一个
li
（橙色）添加样式使用CSS的
last child
或类似的jQuery。可能是我找不到
ul
元素。尝试将CSS与
nth child
一起使用，就像这样
。someclass ul li:nth child（5）
，括号中的5个你需要换到准确的位置。我不完全确定你的问题读对了-但你想为列表中的每个项目设置样式吗？@entropic我的愿望是在最后一个
li
（橙色）添加样式使用CSS的
last child
或类似的jQuery。可能是我找不到
ul
元素。尝试将CSS与
nth child
一起使用，就像这样
。someclass ul li:nth child（5）
，括号中的5需要换到准确的位置。谢谢熵，我知道这个解决方案。没有更简单的方法似乎很疯狂。再次感谢！@user1032531你是对的，这有点疯狂。我用一种更简单的方法更新了这个问题。啊，太好了！我之前看过小部件，但没有看到你理解它。这确实是一个伟大的解决方案！谢谢熵，我知道这个解决方案。只是没有更简单的方法似乎很疯狂。再次感谢！@user1032531你是对的，这有点疯狂。我用一个更简单的方法更新了这个问题。啊，太好了！我之前看过小部件，但不理解它。这是一个真是个好办法