yii\jui\AutoComplete

  搞了這麼久的原生AutoComplete，最後才發現'yii\jui\AutoComplete

<?= $form->field($model, 'smid')->widget('yii\jui\AutoComplete',[

        'options'=>['class'=>'form-control'],

        'clientOptions'=>[

            'source'=> app\models\TrainMember::find()->select(['id'])->column()

        ]

    ]) ?>

可是想豐富一下下拉選項內容，卻搞不定

--------------------------------------------------------------------------------------------------

AutoComplete實現了基本功能，根據輸入查到ID，可是想要獲得更豐富的下拉自定義內容

<?= $form->field($model, 'smid')->widget('yii\jui\AutoComplete',[

        'options'=>['class'=>'form-control'],

        'clientOptions'=>[         

            'source'=>app\models\TrainMember::find()->select(['id'])->column()

            //'source'=>app\models\TrainMember::find()->select(['id，name'])->all()

        ]

]) ?>

手冊裏有的就是這些，轉到JqueryUI去，都是JS代碼：<script>

  $(function() {

    var projects = [

      {

        value: "jqueryvalue",

        label: "jQuerylabel",

        desc: "descthe write less, do more, JavaScript library",

        icon: "iconjquery_32x32.png"

      },

      {

        value: "jquery-ui",

        label: "jQuery UI",

        desc: "the official user interface library for jQuery",

        icon: "jqueryui_32x32.png"

      },

      {

        value: "sizzlejs",

        label: "Sizzle JS",

        desc: "a pure-JavaScript CSS selector engine",

        icon: "sizzlejs_32x32.png"

      }

    ];

 

    $( "#project" ).autocomplete({

      minLength: 0,

      source: projects,

      focus: function( event, ui ) {

        $( "#project" ).val( ui.item.label );

        return false;

      },

      select: function( event, ui ) {

        $( "#project" ).val( ui.item.label );

        $( "#project-id" ).val( ui.item.value );

        $( "#project-description" ).html( ui.item.desc );

        $( "#project-icon" ).attr( "src", "static/images/" + ui.item.icon );

 

        return false;

      }

    })

//想實現下面段JS的代碼，獲得想要的

    .data( "ui-autocomplete" )._renderItem = function( ul, item ) {

      return $( "<li>" )

        .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )

        .appendTo( ul );

    };

  });

  </script>