Yii2 使用select2 组件实现下拉搜索

刚开始使用yii,需要实现下拉多选搜索,就找到了select2这个组件,先看看实现后的效果:

这里写图片描述

如何安装select2网上有很详细的教程,这里不做赘述。

完成后只需要在视图文件use kartik\select2\Select2就可以了。
具体的视图中的代码如下:

<?=
    $form->field($model, 'search')->widget(Select2::classname(), [
        'options' => ['placeholder' => '请输入用户ID ...'],
        'pluginOptions' => [
            'id' =>  new JsExpression("function(rs) {
                return rs.taskId;
            }"),
            'placeholder' => 'search ...',
            'multiple' => true,
            'allowClear' => true,
            'language' => [
                'errorLoading' => new JsExpression("function () { return 'Waiting...'; }"),
            ],
            'ajax' => [
                'url' => Url::to(['gm-account-info/search-title']),
                'dataType' => 'json',
                'data' => new JsExpression('function(params) {
                return {q:params.term}; }')
            ],
            'escapeMarkup' => new JsExpression('function (markup) {
             return markup; }'),
            'templateResult' => new JsExpression('function(res) {
             return res.text; }'),    
            'templateSelection' => new JsExpression('function (res) {
             return res.text; }'),
        ],
    ]);
  ?>

控制器中代码如下:

$out = ['results' => ['userid' => '', 'text' => '']];
        if (!$q) {
            echo json_encode($out);die;
        }
        $data = GmAccountInfo::find()
            ->select('uid as userid, account_name as text')
            ->andFilterWhere(['like', 'uid', $q])
            ->asArray()
            ->all();

        $out['results'] = array_values($data);
        echo json_encode($out);die;

这样出来的结果是这样的:

这里写图片描述

搜索结果是下拉显示出来了,但是无法选中。
这里写图片描述

最后将控制器中的代码做了一点修改:

 $out = ['results' => ['id' => '', 'text' => '']];
        if (!$q) {
            echo json_encode($out);die;
        }
        $data = GmAccountInfo::find()
            ->select('uid as id, uid as text')   //userid=>id
            ->andFilterWhere(['like', 'uid', $q])
            ->asArray()
            ->all();

        $out['results'] = array_values($data);
        echo json_encode($out);die;

将返回数据的格式调整为[‘id’=>”,’text’=>],就正常了。

结论:使用select2 组件时,后端返回的数据格式必须是[‘id’=>”,’text’=>]这个格式的。


版权声明:本文为jxh_smile99原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。