CODEWITHSUNDEEP
jqueryjquery-uijquery-autocompletejquery-ui-autocomplete
Jack
Jack

Reputation: 85

How do I style the first list item in jquery autocomplete?

I am generating a list using jquery-ui autocomplete. I would like to apply a custom class to this list so that I can refer to the first item in this list using a css selector like my_list:first-child.

I have tried the following code, but the class specifier on the li tag is being lost. Any suggestions? The similar questions on here talk about overloading renderItem with monkey patching but given all I want to do is specify a class attribute this seems excessive.

.data('autocomplete')._renderItem = ( ul, item ) ->
  $( "<li class='my_list'></li>" )
    .data( "item.autocomplete", item )
    .append( '<a>' + item.label + '</a>' )
    .appendTo( ul )

Upvotes: 1

Views: 2560

Answers (1)

balexandre
balexandre

Reputation: 75093

if you take a deep look of the output, you will get something like:

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; display: block; width: 108px; top: 275px; left: 576px; ">
    <li class="ui-menu-item" role="menuitem">
        <a class="ui-corner-all ui-state-hover" tabindex="-1" id="ui-active-menuitem">ActionScript</a></li>
    <li class="ui-menu-item" role="menuitem">
        <a class="ui-corner-all" tabindex="-1">AppleScript</a></li>
    <li class="ui-menu-item" role="menuitem">
        <a class="ui-corner-all" tabindex="-1">Asp</a></li>
    <li class="ui-menu-item" role="menuitem">
        <a class="ui-corner-all" tabindex="-1">BASIC</a></li>
</ul>

for such, a style like:

.ui-autocomplete li:first-child { background-color: red; }

will do the trick:

enter image description here

Am I missing something on your question?

Upvotes: 3

Related Questions