ommu / yii2-selectize
selectize.js wrapper for yii2
Installs: 114
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 10
Open Issues: 0
Type:yii2-extension
Requires
- php: >=5.6
- yii2mod/yii2-selectize: *
README
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:
- Tagging input:
echo $form->field($model, "attribute")->widget(Selectize::className(), [ 'pluginOptions' => [ 'persist' => false, 'createOnBlur' => true, 'create' => true ] ]);
- Select input:
echo $form->field($model, "attribute")->widget(Selectize::className(), [ 'items' => [ 'Yes', 'No' ], 'pluginOptions' => [ 'persist' => false, 'createOnBlur' => true, 'create' => true ] ]);
- 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'], ]; }
- 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