Selectize Update :

Add support for a create button using the option allow_create

This add-on is useful when the label cannot be directly mapped to a property.
Pressing a button to create an object on the fly will ease the experience in those scenarios, no need to enter text.
You can also disable the option to create item using the usual method to make sure to avoid confusion.

```
"allow_create": true,
"selectize_options": {
   "create": false
}
```

assets/src/scripts/charcoal/admin/property/input/selectize.js

@@ -53,6 +53,7 @@
         this.init_selectize();
         this.init_clipboard();
         this.init_allow_update();
+        this.init_allow_create();
 
         var self = this;
 
@@ -71,6 +72,7 @@
         // Enables the copy button
         this.copy_items = opts.data.copy_items || this.copy_items;
         this.allow_update = opts.data.allow_update || this.allow_update;
+        this.allow_create = opts.data.allow_create || this.allow_create;
         this.title = opts.data.title || this.title;
         this.translations = opts.data.translations || this.translations;
         this.pattern = opts.data.pattern || this.pattern;
@@ -377,6 +379,26 @@
         this.selectize = $select[0].selectize;
     };
 
+    Selectize.prototype.init_allow_create = function () {
+        if(!this.allow_create) {
+            return;
+        }
+
+        var selectize = this.selectize;
+        var $createButton = $(this.selectize_selector + '_create');
+        var self = this;
+
+        $createButton.on('click', function () {
+            self.create_item(null, function (item) {
+                // Create the item.
+                if (item && item.value) {
+                    selectize.addOption(item);
+                    selectize.addItem(item.value);
+                }
+            });
+        });
+    };
+
     Selectize.prototype.init_allow_update = function () {
         switch (this.selectize.settings.mode) {
             case 'single' :

src/Charcoal/Admin/Property/Input/SelectizeInput.php

@@ -70,6 +70,13 @@ class SelectizeInput extends SelectInput
      */
     protected $allowUpdate;
 
+    /**
+     * Whether to show a button to allow item create.
+     *
+     * @var boolean
+     */
+    protected $allowCreate;
+
     /**
      * The form idents to use while creating objects through Selectize.
      *
@@ -257,6 +264,27 @@ public function allowUpdate()
         return $this->allowUpdate;
     }
 
+    /**
+     * @param boolean $allowCreate Show (TRUE) or hide (FALSE) the create button.
+     * @return self
+     */
+    public function setAllowCreate($allowCreate)
+    {
+        $this->allowCreate = !!$allowCreate;
+
+        return $this;
+    }
+
+    /**
+     * Determine if the property allows "Update items".
+     *
+     * @return boolean
+     */
+    public function allowCreate()
+    {
+        return $this->allowCreate;
+    }
+
     /**
      * @return boolean
      */
@@ -402,7 +430,12 @@ public function defaultSelectizeOptions()
             }
 
             $items = $this->propertyVal();
-            if (count($items) === 1) {
+
+            if (!$items) {
+                $items = [];
+            }
+
+            if (is_scalar($items)) {
                 $items = [$items];
             }
 

templates/charcoal/admin/property/input/selectize.mustache

@@ -34,13 +34,20 @@
             <span class="btn-label sr-only">{{# _t }}Copy To Clipboard{{/ _t }}</span>
         </button>
     {{/ allowClipboardCopy }}
-            {{# allowUpdate }}
-                <button id="{{ inputId }}_update" class="btn btn-info" type="button"
+    {{# allowUpdate }}
+        <button id="{{ inputId }}_update" class="btn btn-info" type="button"
                         data-update-target="#{{ inputId }}">
             <span class="fa fa-pencil" aria-hidden="true"></span>
             <span class="btn-label sr-only">{{# _t }}Update selected item{{/ _t }}</span>
         </button>
-            {{/ allowUpdate }}
+    {{/ allowUpdate }}
+    {{# allowUpdate }}
+        <button id="{{ inputId }}_create" class="btn btn-info" type="button"
+                        data-update-target="#{{ inputId }}">
+            <span class="fa fa-plus" aria-hidden="true"></span>
+            <span class="btn-label sr-only">{{# _t }}Create a new item{{/ _t }}</span>
+        </button>
+    {{/ allowUpdate }}
     </span>
     </div>
 {{/ inputGroup }}
@@ -69,6 +76,9 @@
                 {{# allowUpdate }}
                     allow_update      : true,
                 {{/ allowUpdate }}
+                {{# allowCreate }}
+                    allow_create      : true,
+                {{/ allowCreate }}
                 selectize_selector    : '#{{ inputId }}',
                 form_ident            : {{& formIdentAsJson}},
                 selectize_options     : {{& selectizeOptionsAsJson }},