Yii2 自动完成小部件类别

Question

JQuery 的自动完成功能支持自动完成结果中的类别。就像在下面的 link 中一样（只需输入字母 'a'）：

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

Yii2 的 jQuery 自动完成小部件有一个 source 参数，可以接受一个数组作为自动完成的结果。但是当我给它一个多维数组，试图获得像上面的 link 这样的类别时，它会破坏自动完成。见下文：

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

如何在 Yii2 的自动完成小部件中使用类别？

Answer 1

这种类型的小部件只是 Javascript 插件的包装器，允许您使用 PHP 代码注册它（使用 PHP 数组而不是 Javascript 对象配置属性， ETC。）。如果您调查 AutoComplete widget and parent classes, you will not find any special processing of source property. That means you need to follow jQuery UI plugin docs, click the "view source" link 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（在插件注册之上）以完全重现示例。

Yii2 自动完成小部件类别

Yii2 Autocomplete Widget Categories

jquery-ui

autocomplete

jquery-ui-autocomplete

yii2