Question

使用带有类别的JQueryUI自动完成功能时，如何自定义不同类别的格式？

JQueryUI创建一个附加在＃menu-container之后的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>

这是用于生成列出的自动填充类别的jquery-ui：

<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');

Update2：JSFiddle示例： http://jsfiddle.net/changhaobyu/RhHpd/

Update3：我的下一个问题是我没有附加事件处理程序。在自动完成列表使用项目填充ul之后，JQuery需要触发。我会首先谷歌这个，如果我找不到任何东西，我会在这里问。

Answer 1

您的初始jsfiddle有效，您只需添加jQuery script即可。以下是使用.filter()找到li文本的几种方法：

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

样本： http://jsfiddle.net/dirtyd77/RhHpd/3/

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

样本： http://jsfiddle.net/dirtyd77/RhHpd/4/

当JQuery UI自动填充类别时，如何自定义格式化不同的类别？

1 个答案: