使用 jQuery 或 CSS 到 select jQueryUI 自动完成列表

Question

jQueryUI 自动完成会创建一个类似于以下内容的 ul 列表。我如何使用 jQuery 或 CSS select ul 列表？我可以 ul.ui-autocomplete，但是，我不想 select 我页面上此 class 的每个列表，而只是一个特定的列表。 ID（即 ui-id-1）由插件生成，所以我不能使用它们。我想也许 open 事件会给我访问权限，但是，情况似乎并非如此。 addClass() 将 class 添加到 input 而不是 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>

Answer 1

如果您需要它用于特定的自动完成，您可以使用 _renderItem 函数来覆盖控件的默认呈现。这会将 ul 和 item 传递给它的事件，其中 ul 是呈现的 UL 元素，而 item 是单个行项目。

基本上，您的声明将更改为以下内容：

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

我已经在这里更新了你的 jsbin：http://jsbin.com/seqohugiyu/3/

如您所见，如果您检查 li 元素之一，父元素 ul 会分配一个名为 "whatyouneed" 的 class。

编辑：同样，如果您想在不遍历项目的情况下获取列表的 ul，您可以只获取小部件部分（这将 return ul )，你可以随心所欲地操纵它。所以要操纵它，你可以使用：$( "#autocomplete" ).autocomplete( "widget" ).addClass("yourclass");

可以在此处的文档中找到更多信息：http://api.jqueryui.com/autocomplete/#method-widget

Answer 2

您可以为此使用 CSS：

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

jsFiddle example

使用 jQuery 或 CSS 到 select jQueryUI 自动完成列表

Using jQuery or CSS to select the jQueryUI autocomplete list

css

jquery

jquery-ui

jquery-ui-autocomplete