yii\jui\AutoComplete

2019独角兽企业重金招聘Python工程师标准>>>

  搞了这么久的原生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>

转载于:https://my.oschina.net/u/1046202/blog/379626