Using jQuery or CSS to select the jQueryUI autocomplete list

问题

jQueryUI autocomplete creates a ul list similar to the following. How do I select the ul list using jQuery or CSS? I could do ul.ui-autocomplete, however, I don't want to select every list of this class on my page but just one specific one. The IDs (i.e. ui-id-1) are generated by the plugin, so I can't use these. I thought maybe the open event would give me access, however, doesn't appear to be the case. addClass() adds the class to the input and not the 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>

回答1:

If you need it for a specific autocomplete, you can use the _renderItem function to override the default rendering of the control. This passes in ul and item to it's event, where ul is the UL element that gets rendered, and item is the individual line item.

Essentially, your declaration would change to the following:

$("#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);
 };

I've updated your jsbin here: http://jsbin.com/seqohugiyu/3/

As you can see, if you inspect one of the li elements, the parent ul has a class called "whatyouneed" assigned to it.

EDIT: Similarly, if you want to grab the ul for the list without going through the items, you can just grab the widget portion (which will return the ul) and you can manipulate it anyway you want. So to manipulate it, you would use: $( "#autocomplete" ).autocomplete( "widget" ).addClass("yourclass");

More info can be found in the documentation here: http://api.jqueryui.com/autocomplete/#method-widget

回答2:

You can use CSS for this:

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

jsFiddle example

来源：https://stackoverflow.com/questions/29125024/using-jquery-or-css-to-select-the-jqueryui-autocomplete-list

标签

jquery

css

jquery-ui

jquery-ui-autocomplete