Question

jQueryUI自动完成功能会创建一个类似于以下内容的ul列表。如何使用jQuery或CSS选择ul列表？我可以ul.ui-autocomplete，但是，我不想在我的页面上选择此类的每个列表，而只是选择一个特定的列表。 ID（即ui-id-1）由插件生成，因此我无法使用这些ID。我想也许open事件可以让我访问，但是，似乎并非如此。 addClass()将该类添加到input而不是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>

http://jsbin.com/sovene/1/

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            $(function(){
                $("#autocomplete").autocomplete({
                    source: ["an apple","a peach","an orange"],
                    minLength: 1,
                    open: function( event, ui ) {
                        console.log('open',event,ui,this);
                    }
                }).addClass( "whatever" );
                $( "#autocomplete" ).on( "autocompleteopen", function( event, ui ) {console.log('autocompleteopen',event,ui,this);} );
            });
        </script>
    </head>

    <body>
        <input type="text" id="autocomplete" />
    </body> 
</html>

Answer 1

如果您需要特定的自动完成功能，可以使用_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);
 };

我在这里更新了你的jsbin：http://jsbin.com/seqohugiyu/3/

正如您所看到的，如果您检查其中一个li元素，则父ul会有一个名为＆＃34; Whatyouneed＆＃34;分配给它。

编辑：同样，如果你想在不经过项目的情况下获取列表的ul，你可以抓住小部件（它将返回ul）并且你可以操纵它无论如何你想要的。因此，要操纵它，您可以使用：$( "#autocomplete" ).autocomplete( "widget" ).addClass("yourclass");

更多信息可在此处的文档中找到：http://api.jqueryui.com/autocomplete/#method-widget

Answer 2

您可以使用CSS：

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

<强> jsFiddle example

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

2 个答案: