khotim/yii2-select2

Select2 extension for the Yii framework

v1.0 2016-03-02 11:07 UTC

Requires

• php: >=5.4.0
• yiisoft/yii2: *

MIT

• Thimy Khotim

• select2
• yii2
• yii2-select2

README

Yii2 Select2 is an input widget extends from \yii\widgets\inputWidget which uses the ability of Select2 plugin.

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist khotim/yii2-select2 "*"

or add

"khotim/yii2-select2": "*"

to the require section of your composer.json file.

Usage

This extension is similar to Html::dropDownList() except that a text input will be used to search the available option list from a data source. The minimum usage using prepared array is

echo \khotim\select2\Select2::widget([
    'name' => 'option_list',
    'data' => [
        0 => 'enhancement',
        1 => 'bug',
        2 => 'duplicate',
        3 => 'invalid',
        4 => 'wontfix'
    ],
]);

You can also attach this extension in an ActiveField by configuring its widget() method like this

<?= $form->field($model, 'option_list')->widget(\khotim\select2\Select2::className(), [
    'data' => [
        0 => 'enhancement',
        1 => 'bug',
        2 => 'duplicate',
        3 => 'invalid',
        4 => 'wontfix'
    ],
]) ?>

Example usage using data source via ajax call:

View

<?= $form->field($model, 'option_list')->widget(\khotim\select2\Select2::className(), [
    'clientOptions' => [
        'escapeMarkup' => new \yii\web\JsExpression('function (markup) { return markup; }'),
        'minimumInputLength' => 1,
        'placeholder' => 'search option list...',
        'allowClear' => true,
        'ajax' => [
            'url' => \yii\helpers\Url::to(['lookup/search-option']),
            'dataType' => 'json',
            'delay' => 250,
            'data' => new \yii\web\JsExpression('function (params) {
                return {
                    q: params.term, // search term
                    page: params.page
                };
            }'),
            'processResults' => new \yii\web\JsExpression('function (data, params) {
                // parse the results into the format expected by Select2
                // since we are using custom formatting functions we do not need to
                // alter the remote JSON data, except to indicate that infinite
                // scrolling can be used
                params.page = params.page || 1;
                return {
                    results: data.items,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            }'),
            'cache' => true
        ]
    ]
])?>

Controller

public function actionSearchOption()
{
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    $param = Yii::$app->request->get('q');
    $models = \app\models\OptionSearch::findAll($param);
    $data['items'] = \yii\helpers\ArrayHelper::toArray($models, [
        'app\models\OptionSearch' => [
            'id',
            'text' => function ($model) {
                return $model->name;
            }
        ]
    ]);
    
    return $data;
}

Public Properties

Property	Type	Description
$data	array	The array of data items, similar to how items parameter in \yii\helpers\BaseHtml::dropDownList().
$options	array	The HTML attributes for the input <select></select> tag. The default value for "class" element is set to "form-control".
$clientOptions	array	The options for the underlying Select2 plugin. Refers to this page for more information.
$clientEvents	array	The event handlers for the underlying Select2 plugin e.g. ['change' => 'function () {alert('event "change" occured.');}'].