Yii2 Selectize Widget

Widget based on selectize.js extension https://selectize.github.io/selectize.js/

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist yii2mod/yii2-selectize "*"

or add

"yii2mod/yii2-selectize": "*"

to the require section of your composer.json.

Usage

Once the extension is installed, simply add widget to your page as follows:

1) Tagging input:

echo $form->field($model, "attribute")->widget(Selectize::className(), [
        'pluginOptions' => [
            'persist' => false,
            'createOnBlur' => true,
            'create' => true
        ]
]); 

2) Select input:

echo $form->field($model, "attribute")->widget(Selectize::className(), [
        'items' => [
            'Yes',
            'No'
        ],
        'pluginOptions' => [
            'persist' => false,
            'createOnBlur' => true,
            'create' => true
        ]
]); 

3) Tagging input with remote source and default values(If you want render select input, just setup items property):

Setup view file:

// setup the following to get the existing data from database
$model->attribute = 'first, last';

// or if the data is an array you can preselect the tags like this
$model->attribute = implode(', ', ["first", "last"]);

echo $form->field($model, "attribute")->widget(Selectize::className(), [
         'url' => '/site/search',
         'pluginOptions' => [
            'valueField' => 'name',
            'labelField' => 'name',
            'searchField' => ['name'],
            'persist' => false,
            'createOnBlur' => true,
            'create' => true
        ]
]);

Your action must return data in the json format, for example:

  public function actionSearch($query = null)
  {
      Yii::$app->response->format = Response::FORMAT_JSON;
      return [
          ['name' => 'Search Item 1'],
          ['name' => 'Search Item 2'],
      ];
  }

4) Usage widget with plugins:

echo Selectize::widget([
        'name' => 'tag-selectize',
        'options' => [
             'data-data' => $values ? Json::encode($values) : null // Set default values
        ],
        'pluginOptions' => [
             // define list of plugins 
            'plugins' => ['drag_drop', 'remove_button'],
            'persist' => false,
            'createOnBlur' => true,
            'create' => true
        ]
 ]);

Select Options

You can find them on the options page

Support us

Does your business depend on our contributions? Reach out and support us on Patreon. All pledges will be dedicated to allocating workforce on maintenance and new awesome stuff.