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;
}