Yii2.0 下拉带搜索功能 (yii-select2)

安装 yii-select2组件

github: https://github.com/kartik-v/yii2-widget-select2

php composer.phar require kartik-v/yii2-widget-select2 "@dev"
or
composer require kartik-v/yii2-widget-select2 "@dev"

#特别说明,因为这里安装的dev版本,也就是开发版本,不稳定版本,如果你的项目是git托管的,composer安装下来之后这里记得删掉 \vendor\kartik-v\yii2-widget-select2目录下的.git文件,不然你提交不上去的哦 等他个大概5分钟的样子差不多了,安装就好了,然后我们就可以像下面一样开始使用了

如果你的表单是ActiveForm,请使用

use kartik\select2\Select2; 
//$data是键值对数组哦,key-value ,下面所声明的所有$data均为键值对数组,以该数组为例 
$data = [2 => 'widget', 3 => 'dropDownList', 4 => 'yii2']; 
echo $form->field($model, 'title')->widget(Select2::classname(), [  
    'data' => $data, 
    'options' => ['placeholder' => '请选择 ...'], 
]);

如果你的表单是非ActiveForm,可以参考下面的

use kartik\select2\Select2; 
echo Select2::widget([ 'name' => 'title', 
    'data' => $data, 
    'options' => ['placeholder' => '请选择...'] 
]);

非ActiveFomr生成的更新数据的时候就需要默认选中,好办,加value值即可

use kartik\select2\Select2; 
echo Select2::widget([ 
    'name' => 'title', 
    'value' => 2, 
    'data' => $data, 
    'options' => ['placeholder' => '请选择...'] 
]);

但是如果你的表单是ActiveForm生成的,但是往往字段不是表字段怎么办呢?更好办啦,以上面的为例,你只需要指定$model->title = [‘title1’, ‘title2’];即可

多选

echo $form->field($model, 'title')->widget(Select2::classname(), [ 
    'data' => $data, 
    'options' => ['multiple' => true, 'placeholder' => '请选择 ...'], 
]);

多选的添加默认值同上

眼尖的注意到了,加了一个multiple选项。非ActiveForm生成的表单操作一致。

代码

// view层
use kartik\select2\Select2;
use yii\web\JsExpression;

    echo $form->field($model, 'title')->widget(Select2::classname(), [
        'options' => ['placeholder' => '请输入标题名称 ...'],
        'pluginOptions' => [
            'placeholder' => 'search ...',
            'allowClear' => true,
            'language' => [
                'errorLoading' => new JsExpression("function () { return 'Waiting...'; }"),
            ],
            'ajax' => [
                'url' => '这里是提供数据源的接口',
                '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; }'),
        ],
    ]);

上面的代码可直接复制使用,唯独需要修改的就是ajax里对应的url地址。下面我们看看controller层代码是怎么提供数据的。

//controller层
public function actionSearchTitle ($q)
{
    \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    $out = ['results' => ['id' => '', 'text' => '']];
    if (!$q) {
        return $out;
    }

    $data = Article::find()
                ->select('id, title as text')
                ->andFilterWhere(['like', 'title', $q])
                ->limit(50)
                ->asArray()
                ->all();
                
    $out['results'] = array_values($data);

    return $out;
}



导航