1

When using JQueryUI Autocomplete with Categories, how do I custom format the different categories?

JQueryUI creates a ul that appends to after a #menu-container <div>. The script below simply populates that ul with line items that are sorted by category. What I want to do is to add a class to that category so that I can format it with individual css.

This is the html generated:

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

This is the jquery-ui used to generate the category listed autocomplete:

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

Update, I've added the following line of code, but the class isn't appending to the line item.

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

Update2: JSFiddle Example: http://jsfiddle.net/changhaobyu/RhHpd/

Update3: My next problem is that I'm not attaching an event handler. The JQuery needs to fire after the autocomplete list has populated the ul with items. I'll Google this first and if I don't find anything I'll ask here.

4

1 に答える 1

0

最初のjsfiddleは機能します。追加する必要があるだけですjQuery script。liを使用して のテキストを検索するには、次の 2 つの方法があります.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 に答える