, (*1)
Yii2 Selectize Widget
Widget based on selectize.js extension https://selectize.github.io/selectize.js/, (*2)
, (*3)
Installation
The preferred way to install this extension is through composer., (*4)
Either run, (*5)
php composer.phar require --prefer-dist yii2mod/yii2-selectize "*"
or add, (*6)
"yii2mod/yii2-selectize": "*"
to the require section of your composer.json., (*7)
Usage
Once the extension is installed, simply add widget to your page as follows:, (*8)
1) Tagging input:, (*9)
echo $form->field($model, "attribute")->widget(Selectize::className(), [
'pluginOptions' => [
'persist' => false,
'createOnBlur' => true,
'create' => true
]
]);
2) Select input:, (*10)
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):, (*11)
Setup view file:, (*12)
// 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:**
```php
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:, (*13)
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, (*14)
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., (*15)
Wallogit.com
