Yii2 자동 완성 위젯 카테고리

Question

JQuery의 자동 완성은 자동 완성 결과에서 카테고리를 지원합니다. 아래 링크에서와 같이 (단지 'A'문자를 입력) :

https://jqueryui.com/resources/demos/autocomplete/categories.html

Yii2의 jQuery를 자동 완성 위젯은 자동 완성의 결과를 배열에 걸릴 수 source 매개 변수가 있습니다. 하지만 위의 링크와 같은 카테고리를 얻으려고 다차원 배열을 지정하면 자동 완성이 중단됩니다. 아래 참조 :

AutoComplete::widget([ 
    'name' => 'search_terms', 
    'options' => [ 
     'style' => 'width:100%;', 
    ], 
    'clientOptions' => [ 
     'source' => ['NA' => ['USA', 'CAN'], 'EUR' => ['RUS', 'SPN']], 
    ], 
]) 

Yii2의 자동 완성 위젯에서 카테고리를 작동 시키려면 어떻게해야합니까?

Answer 1

위젯 유형은 자바 스크립트 플러그인의 래퍼 일 뿐이므로 PHP 코드를 사용하여 등록 할 수 있습니다 (Javascript 객체 대신 PHP 배열을 사용하여 속성을 구성하는 등). AutoComplete 위젯과 부모 클래스의 소스를 조사하면 source 속성의 특수 처리를 찾을 수 없습니다. 즉, jQuery UI 플러그인 문서를 따르고 코드를 표시하려면 "소스보기"링크 here을 클릭해야합니다. JS 부분은 다음과 같습니다.

<script> 
    $(function() { 
    $.widget("custom.catcomplete", $.ui.autocomplete, { 
     _create: function() { 
     this._super(); 
     this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)"); 
     }, 
     _renderMenu: function(ul, items) { 
     var that = this, 
      currentCategory = ""; 
     $.each(items, function(index, item) { 
      var li; 
      if (item.category != currentCategory) { 
      ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
      currentCategory = item.category; 
      } 
      li = that._renderItemData(ul, item); 
      if (item.category) { 
      li.attr("aria-label", item.category + " : " + item.label); 
      } 
     }); 
     } 
    }); 
    var data = [ 
     { label: "anders", category: "" }, 
     { label: "andreas", category: "" }, 
     { label: "antal", category: "" }, 
     { label: "annhhx10", category: "Products" }, 
     { label: "annk K12", category: "Products" }, 
     { label: "annttop C13", category: "Products" }, 
     { label: "anders andersson", category: "People" }, 
     { label: "andreas andersson", category: "People" }, 
     { label: "andreas johnson", category: "People" } 
    ]; 

    $("#search").catcomplete({ 
     delay: 0, 
     source: data 
    }); 
    }); 
</script> 

자세히 알 수 있듯이 틀린 부분을 전달하고 있습니다. 대신이 시도 :

'source' => [ 
    ['label' => 'USA', 'category' => 'NA'], 
    ['label' => 'CAN', 'category' => 'NA'], 
    ['label' => 'RUS', 'category' => 'EUR'], 
    ['label' => 'RUS', 'category' => 'SPN'], 
], 

는 또한이 경우에 어쩌면 당신은 완전히 예를 재현하기 위해 (플러그인 등록 위) 추가 JS를 포함해야합니다.