1

将 JQueryUI 自动完成与类别一起使用时，如何自定义格式化不同类别？

JQueryUI 创建一个 ul 附加到#menu-container <div>. 下面的脚本只是用按类别排序的行项目填充该 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 需要触发。我会先谷歌这个，如果我没有找到任何东西，我会在这里问。

4

1 回答 1

0

您最初的jsfiddle有效，您只需要添加jQuery script. li以下是使用 查找的文本的几种方法.filter()：

$('.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/

于 2013-04-12T17:04:17.663 回答