yii\jui\AutoComplete

原创
2015/02/23 20:29
阅读数 278

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


展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部