Yii2下的select2使用

新手，不擅长写js，纯粹只是分享一下自己遇到的问题供大家参考一下

---

select2这个插件，就是带搜索功能的下拉选择框
效果如图：

使用前先确定自己的项目安装了select2，如果没有的话就用composer安装一下

• 使用的时候先在头部引用插件

use kartik\select2\Select2;

• 如果表单是ActiveForm，可以使用下面代码
• $data是键值对数组，key-value ,下面所声明的所有$data均为键值对数组，以该数组为例

$data = [2 => 'widget', 3 => 'dropDownList', 4 => 'yii2']; 
$form->field($model, 'title')->widget(Select2::classname(), [  
    'data' => $data, 
    'options' => ['placeholder' => '请选择 ...'], 
]);

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

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

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

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

• 如果想实现多选的话，在options中加入一个multiple选项，即

Select2::widget([ 
    'name' => 'title', 
    'value' => 2, 
    'data' => $data, 
    'options' => ['multiple' => true, 'placeholder' => '请选择...'] 
]);

• 在实际项目中，我把data直接从model层获取来，并加上了id

$form->field($model, 'back_reason')->widget(Select2::classname(),
    [
        'name'  => 'search',
        'value' => isset($params['company_id'])?$params['company_id']:'',
        'data'  => \yii\helpers\ArrayHelper::map(\app\models\BackReason::find()->where(['level'=>\app\models\BackReason::LEVEL_2])->asArray()->all(),'id','reason'),
        'options' => ['placeholder' => '退稿原因搜索','style'=>'width:110px;','id'=>'searchreason',],
        'pluginOptions' => [
            'allowClear' => true,
            'width' => '220px',
        ],
    ])

• 正常情况下这样就可以使用了，但是如果是在bootstrap的模态框中使用select2插件的话，会出现无法输入的问题，插件一直无法获取焦点
  
• 1.首先查看主div中是否有tabindex="-1"
• 2.重写enforceFocus方法

<script>
    $(function() {
        $.fn.modal.Constructor.prototype.enforceFocus = function () {};
    });
</script>

• 如果想实现异步搜索功能
• 1.view层，代码可直接复制使用，唯独需要修改的就是ajax里对应的url地址

use kartik\select2\Select2;
use yii\web\JsExpression;
<? php
    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; }'),
        ],
    ]);
? >

• 2.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;
}