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. 使用带有插件的widget

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

选择选项

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

支持我们

您的业务是否依赖于我们的贡献？请通过Patreon与我们联系并支持我们。所有承诺都将致力于分配人力进行维护和新酷炫的功能。