Using jQuery or CSS to select the jQueryUI autocomplete list

Question

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>

Not entirely sure I'm reading your question right - but do you want to style each individual item of the list? — entropic
– entropic, Commented Mar 18, 2015 at 14:49
@entropic My desire is to add style to the last li (an orange) either using CSS's last-child or something similar using jQuery. Probably is I can't get ahold of the ul element. — user1032531
– user1032531, Commented Mar 18, 2015 at 14:50
try to use css with nth-child, like this .someclass ul li:nth-child(5), that 5 in bracket you need to change to the exact position. — Akhil Namboothiri
– Akhil Namboothiri, Commented Mar 18, 2015 at 15:24

entropic · Accepted Answer · 2015-03-18 18:14:34Z

4

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

edited Mar 18, 2015 at 18:14

answered Mar 18, 2015 at 15:30

entropic

1,68314 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1032531 Over a year ago

Thanks entropic, I was aware of this solution. Just seems crazy that there isn't a more simple approach. Thanks again!

entropic Over a year ago

@user1032531 You're right, it is a bit crazy. I've updated the question with a MUCH simpler way to get it.

user1032531 Over a year ago

Ah, perfect! I looked at widget earlier but didn't understand it.

Johny Over a year ago

This is a great solution indeed!

j08691 · Accepted Answer · 2015-03-18 18:26:03Z

0

You can use CSS for this:

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

jsFiddle example

edited Mar 18, 2015 at 18:26

answered Mar 18, 2015 at 18:20

j08691

208k33 gold badges269 silver badges281 bronze badges

5 Comments

entropic Over a year ago

This will do it for every autocomplete on the page. He noted in the question he wanted it for a specific one.

j08691 Over a year ago

@entropic - The way I'm reading the OP's question is that he doesn't want to apply any code to all lists, which an autocomplete is comprised of. I don't think the OP means he has multiple autocompletes. But a clarification would be helpful.

user1032531 Over a year ago

I do have multiple autocompletes on the page, and thus this will not work. Thanks anyway.

j08691 Over a year ago

And you have nothing unique about them to identify them?

user1032531 Over a year ago

@j08691 Thank is my question. Amazingly not (at least not until entropic posted his answer).

Collectives™ on Stack Overflow

Using jQuery or CSS to select the jQueryUI autocomplete list

2 Answers 2

4 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related