Merge pull request #15079 from abpframework/Add-AllowClear-To-Select2-12130

Added AllowClear and Placeholder to select2

docs/en/UI/AspNetCore/AutoComplete-Select.md

@@ -22,7 +22,8 @@ A simple usage is presented below.
     data-autocomplete-display-property="name"
     data-autocomplete-value-property="id"
     data-autocomplete-items-property="items"
-    data-autocomplete-filter-param-name="filter">
+    data-autocomplete-filter-param-name="filter"
+    data-autocomplete-allow-clear="true">
 
     <!-- You can define selected option(s) here  -->
     <option selected value="@SelectedAuthor.Id">@SelectedAuthor.Name</option>
@@ -38,6 +39,8 @@ The select must have the `auto-complete-select` class and the following attribut
 - `data-autocomplete-filter-param-name`: * Filter text property name. _(For example: `filter`)_.
 - `data-autocomplete-selected-item-name`: Text to display as selected item.
 - `data-autocomplete-parent-selector`: jQuery selector expression for parent DOM. _(If it's in a modal, it's suggested to send the modal selector as this parameter)_.
+- `data-autocomplete-allow-clear`: If `true`, it'll allow to clear the selected value. Default value: `false`.
+- `data-autocomplete-placeholder`: Placeholder text to display when no value is selected.
 
 Also, selected value(s) should be defined with the `<option>` tags inside select, since pagination is applied and the selected options might haven't loaded yet.
 

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelper.cs

@@ -38,6 +38,10 @@ public class AbpSelectTagHelper : AbpTagHelper<AbpSelectTagHelper, AbpSelectTagH
 
     public string AutocompleteSelectedItemValue { get; set; }
 
+    public string AllowClear { get; set; }
+
+    public string Placeholder { get; set; }
+
     public AbpSelectTagHelper(AbpSelectTagHelperService tagHelperService)
         : base(tagHelperService)
     {

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs

@@ -120,6 +120,8 @@ public class AbpSelectTagHelperService : AbpTagHelperService<AbpSelectTagHelper>
             output.Attributes.Add("data-autocomplete-filter-param-name", TagHelper.AutocompleteFilterParamName);
             output.Attributes.Add("data-autocomplete-selected-item-name", TagHelper.AutocompleteSelectedItemName);
             output.Attributes.Add("data-autocomplete-selected-item-value", TagHelper.AutocompleteSelectedItemValue);
+            output.Attributes.Add("data-autocomplete-allow-clear", TagHelper.AllowClear);
+            output.Attributes.Add("data-autocomplete-placeholder", TagHelper.Placeholder);
         }
     }
 

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js

@@ -74,20 +74,26 @@
     abp.dom.initializers.initializeAutocompleteSelects = function ($autocompleteSelects) {
         if ($autocompleteSelects.length) {
             $autocompleteSelects.each(function () {
-                var $select = $(this);
-                var url = $(this).data("autocompleteApiUrl");
-                var displayName = $(this).data("autocompleteDisplayProperty");
-                var displayValue = $(this).data("autocompleteValueProperty");
-                var itemsPropertyName = $(this).data("autocompleteItemsProperty");
-                var filterParamName = $(this).data("autocompleteFilterParamName");
-                var selectedText = $(this).data("autocompleteSelectedItemName");
-                var parentSelector = $(this).data("autocompleteParentSelector");
-                if(!parentSelector && $select.parents(".modal.fade").length === 1){
+                let $select = $(this);
+                let url = $(this).data("autocompleteApiUrl");
+                let displayName = $(this).data("autocompleteDisplayProperty");
+                let displayValue = $(this).data("autocompleteValueProperty");
+                let itemsPropertyName = $(this).data("autocompleteItemsProperty");
+                let filterParamName = $(this).data("autocompleteFilterParamName");
+                let selectedText = $(this).data("autocompleteSelectedItemName");
+                let parentSelector = $(this).data("autocompleteParentSelector");
+                let allowClear = $(this).data("autocompleteAllowClear");
+                let placeholder = $(this).data("autocompletePlaceholder");
+                if (allowClear && placeholder == undefined) {
+                    placeholder = " ";
+                }
+
+                if (!parentSelector && $select.parents(".modal.fade").length === 1) {
                     parentSelector = ".modal.fade";
                 }
-                var name = $(this).attr("name");
-                var selectedTextInputName = name + "_Text";
-                var selectedTextInput = $('<input>', {
+                let name = $(this).attr("name");
+                let selectedTextInputName = name + "_Text";
+                let selectedTextInput = $('<input>', {
                     type: 'hidden',
                     id: selectedTextInputName,
                     name: selectedTextInputName,
@@ -101,13 +107,13 @@
                         url: url,
                         dataType: "json",
                         data: function (params) {
-                            var query = {};
+                            let query = {};
                             query[filterParamName] = params.term;
                             return query;
                         },
                         processResults: function (data) {
-                            var retVal = [];
-                            var items = data;
+                            let retVal = [];
+                            let items = data;
                             if (itemsPropertyName) {
                                 items = data[itemsPropertyName];
                             }
@@ -125,6 +131,11 @@
                     },
                     width: '100%',
                     dropdownParent: parentSelector ? $(parentSelector) : $('body'),
+                    allowClear: allowClear,
+                    placeholder: {
+                        id: '-1',
+                        text: placeholder
+                    }
                 });
                 $select.on('select2:select', function (e) {
                     selectedTextInput.val(e.params.data.text);