Home/ Questions/Q 7801247
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T00:53:15+00:00

I am generating a list using jquery-ui autocomplete. I would like to apply a

  • 0

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 )
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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?

    • 0