搞搞的传奇 2015-02-24 19:00:28 4291次浏览 1条回复 0 0 0

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>
您需要登录后才可以回复。登录 | 立即注册