如何设置jquery自动完成中的第一个列表项?

时间:2012-04-15 10:54:08

标签: jquery jquery-ui jquery-autocomplete jquery-ui-autocomplete

我使用jquery-ui自动完成生成列表。我想将一个自定义类应用于此列表,以便我可以使用像my_list这样的css选择器引用此列表中的第一项:first-child。

我尝试了以下代码,但li标签上的类说明符正在丢失。有什么建议?这里类似的问题讨论了使用猴子补丁重载renderItem但是我想要做的就是指定一个看起来过分的类属性。

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

1 个答案:

答案 0 :(得分:3)

如果你仔细看看of the output,你会得到类似的东西:

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

对于这样的风格,如:

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

会做到这一点:

enter image description here

我错过了你的问题吗?