README

Yii2 Selectize小部件

基于selectize.js扩展的小部件 https://selectize.github.io/selectize.js/

安装

安装此扩展的首选方式是通过 composer。

运行以下命令之一

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

或者

"yii2mod/yii2-selectize": "*"

将其添加到您的composer.json文件的require部分。

使用方法

一旦安装了扩展，只需将小部件添加到您的页面即可，如下所示

1. 标签输入

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

1. 选择输入

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

1. 带有远程源和默认值的标签输入（如果您想渲染选择输入，只需设置items属性）

设置视图文件

// 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
        ]
]);

您的操作必须以json格式返回数据，例如

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

1. 使用小部件与插件

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
        ]
 ]);

选择选项

您可以在选项页面上找到它们