Add support for allowCustom in dropdown fields

Replaces #151. Credit to @RomainMazB

modules/backend/widgets/form/partials/_field_dropdown.php

@@ -2,6 +2,7 @@
 $fieldOptions = $field->options();
 $useSearch = $field->getConfig('showSearch', true);
 $emptyOption = $field->getConfig('emptyOption', $field->placeholder);
+$allowCustom = $field->getConfig('allowCustom', false);
 ?>
 
 <!-- Dropdown -->
@@ -14,7 +15,7 @@
     <select
         id="<?= $field->getId() ?>"
         name="<?= $field->getName() ?>"
-        class="form-control custom-select <?= $useSearch ? '' : 'select-no-search' ?>"
+        class="form-control custom-select <?= $useSearch ? '' : 'select-no-search' ?> <?= $allowCustom ? 'select-modifiable' : '' ?>"
         <?= $field->getAttributes() ?>
         <?= $field->placeholder ? 'data-placeholder="'.e(trans($field->placeholder)).'"' : '' ?>
         >

modules/system/assets/ui/js/select.js

@@ -66,6 +66,34 @@
             if ($element.hasClass('select-no-search')) {
                 extraOptions.minimumResultsForSearch = Infinity
             }
+            if ($element.hasClass('select-modifiable')) {
+                extraOptions.tags = true;
+
+                extraOptions.createTag = function (params) {
+                    var term = $.trim(params.term);
+
+                    if (term === '') {
+                        return null;
+                    }
+
+                    return {
+                        id: term,
+                        text: term,
+                        newTag: true
+                    };
+                }
+
+                extraOptions.templateResult = function (state) {
+                    if (!state.id) {
+                        return state.text;
+                    }
+                    var icon = state.newTag ? '<i class="icon-plus"></i> ' : '';
+
+                    return $(
+                        '<span>' + icon + state.text + '</span>'
+                    );
+                }
+            }
             if ($element.hasClass('select-no-dropdown')) {
                 extraOptions.dropdownCssClass += ' select-no-dropdown'
                 extraOptions.containerCssClass += ' select-no-dropdown'