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>