Jquery ui 当JQuery UI自动完成类别时，如何自定义不同类别的格式？

在对类别使用JQueryUI Autocomplete时，如何自定义不同类别的格式

JQueryUI创建一个ul，该ul附加到#菜单容器之后。 下面的脚本只是用按类别排序的行项目填充该ul。 我想做的是在该类别中添加一个类，这样我就可以使用单个css对其进行格式化

这是生成的html：

<ul class="ui-autocomplete">
<li class="ui-autocomplete-category">Activities</li>
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">andhhx10</a></li>
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">andk K12</a></li>
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">andttop C13</a></li>
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">andttop C11</a></li>
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">anders andersson</a></li>
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">andreas andersson</a></li>
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">andreas johnson</a></li>
<li class="ui-autocomplete-category">Vendors</li>
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">anders</a></li>
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">andreas</a></li>
</ul>

Update2:JSFiddle示例：

更新3：我的下一个问题是我没有附加事件处理程序。JQuery需要在autocomplete列表向ul填充项目后启动。我会先用谷歌搜索一下，如果找不到任何东西，我会在这里询问。

你最初的作品，你只需要添加

jQuery脚本。以下是使用以下方法查找
li
文本的几种方法：

演示：


演示：
提供示例。使用基本案例和我的选择器进行更新。我不担心自动完成渲染，它做得很好。我只是想将一个类“.ui auto vendors”添加到该特定项目中，在该行项目的内部显示“vendors”
<script>
$.widget( "custom.catcomplete", $.ui.autocomplete, {
  _renderMenu: function( ul, items ) {
   var self = this,
    currentCategory = "";
   $.each( items, function( index, item ) {
    if ( item.category != currentCategory ) {
     ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
     currentCategory = item.category;
    }
    self._renderItem( ul, item );
   });
  }
 });
</script>
<script>
var data = [

            { label: "andhhx10", category: "Activities" },
            { label: "andk K12", category: "Activities" },
            { label: "andttop C13", category: "Activities" }, 
            { label: "andttop C11", category: "Activities" }, 
            { label: "anders andersson", category: "Activities" },
            { label: "andreas andersson", category: "Activities" },
            { label: "andreas johnson", category: "Activities" },
            { label: "anders", category: "Vendors" },
            { label: "andreas", category: "Vendors" },
            { label: "antal", category: "Vendors" },
];

$( "#UserActivity" ).catcomplete({
    source: data,
    appendTo: '#menu-container',
});

</script>

$('#menu-container ul li:contains(Vendors)').addClass('ui-auto-vendors');

$('.ui-autocomplete-category').filter(':contains(Vendors)').addClass('ui-auto-vendors');

$('.ui-autocomplete-category').filter(function() { 
    return $.text([this]) == 'Vendors'; 
}).addClass('ui-auto-vendors');