JQuery UI가 카테고리로 자동 완성 될 때, 어떻게 다른 카테고리를 사용자 정의 할 수 있습니까?

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

갱신 2 : JSFiddle 예 : http://jsfiddle.net/changhaobyu/RhHpd/

갱신 3 : 나의 다음 문제는 내가 이벤트 처리기를 부착하고 있지 않다 때문이다. 자동 완성 목록에서 ul에 항목을 채운 후에 JQuery를 실행해야합니다. 나는 먼저 이것들을 google 할 것이고 만약에 내가 아무것도 찾을 수 없다면 나는 여기서 물을 것이다.

Answer 1

처음으로 jsfiddle이 작동하면 jQuery script을 추가하기 만하면됩니다. 여기 .filter() 사용하여 li의 텍스트를 찾는 몇 가지 방법은 다음과 같습니다

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

DEMO : http://jsfiddle.net/dirtyd77/RhHpd/3/

---

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

DEMO : http://jsfiddle.net/dirtyd77/RhHpd/4/