update select tag helper to support autocomplete scenarios.

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

@@ -21,6 +21,12 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
         [HtmlAttributeName("required-symbol")]
         public bool DisplayRequiredSymbol { get; set; } = true;
 
+        public string AutocompleteApiUrl { get; set; }
+
+        public string AutocompleteDisplayPropertyName { get; set; }
+
+        public string AutocompleteValuePropertyName { get; set; }
+
         public AbpSelectTagHelper(AbpSelectTagHelperService tagHelperService)
             : base(tagHelperService)
         {

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

@@ -78,20 +78,36 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
             var selectTagHelper = new SelectTagHelper(_generator)
             {
                 For = TagHelper.AspFor,
-                Items = GetSelectItems(context, output),
                 ViewContext = TagHelper.ViewContext
             };
 
+            if (TagHelper.AutocompleteApiUrl.IsNullOrEmpty())
+            {
+                selectTagHelper.Items = GetSelectItems(context, output);
+            }
+
             var selectTagHelperOutput = await selectTagHelper.ProcessAndGetOutputAsync(GetInputAttributes(context, output), context, "select", TagMode.StartTagAndEndTag);
 
             selectTagHelperOutput.Attributes.AddClass("form-control");
             selectTagHelperOutput.Attributes.AddClass(GetSize(context, output));
             AddDisabledAttribute(selectTagHelperOutput);
             AddInfoTextId(selectTagHelperOutput);
+            AddAutocompleteAttributes(selectTagHelperOutput);
 
             return selectTagHelperOutput;
         }
 
+        protected virtual void AddAutocompleteAttributes(TagHelperOutput output)
+        {
+            if (!TagHelper.AutocompleteApiUrl.IsNullOrEmpty())
+            {
+                output.Attributes.AddClass("auto-complete-select");
+                output.Attributes.Add("data-autocomplete-api-url", TagHelper.AutocompleteApiUrl);
+                output.Attributes.Add("data-autocomplete-display-property", TagHelper.AutocompleteDisplayPropertyName);
+                output.Attributes.Add("data-autocomplete-value-property", TagHelper.AutocompleteValuePropertyName);
+            }
+        }
+
         protected virtual void AddDisabledAttribute(TagHelperOutput inputTagHelperOutput)
         {
             var disabledAttribute = TagHelper.AspFor.ModelExplorer.GetAttribute<DisabledInput>();

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

@@ -71,6 +71,42 @@
         $timeagos.timeago();
     }
 
+    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");
+                $select.select2({
+                    ajax: {
+                        url: url,
+                        dataType: "json",
+                        data: function (params) {
+                            var query = {
+                                search: params.term
+                            };
+                            return query;
+                        },
+                        processResults: function (data) {
+                            var retVal = [];
+                            data.forEach(function (item, index) {
+                                retVal.push({
+                                    id: item[displayValue],
+                                    text: item[displayName]
+                                })
+                            });
+                            return {
+                                results: retVal
+                            };
+                        }
+                    },
+                    width: '100%'
+                });
+            });
+        }
+    }
+
     abp.libs = abp.libs = abp.libs || {};
     abp.libs.bootstrapDatepicker = {
         packageName: "bootstrap-datepicker",
@@ -91,7 +127,7 @@
                     locale: abp.localization.currentCulture.name
                 }).toLocaleString();
         },
-        getOptions: function($input) { //$input may needed if developer wants to override this method
+        getOptions: function ($input) { //$input may needed if developer wants to override this method
             return {
                 todayBtn: "linked",
                 autoclose: true,
@@ -121,6 +157,7 @@
         abp.dom.initializers.initializeTimeAgos(args.$el.findWithSelf('.timeago'));
         abp.dom.initializers.initializeForms(args.$el.findWithSelf('form'), true);
         abp.dom.initializers.initializeScript(args.$el);
+        abp.dom.initializers.initializeAutocompleteSelects(args.$el.findWithSelf('.auto-complete-select'));
     });
 
     abp.dom.onNodeRemoved(function (args) {
@@ -139,7 +176,9 @@
         abp.dom.initializers.initializeTimeAgos($('.timeago'));
         abp.dom.initializers.initializeDatepickers($(document));
         abp.dom.initializers.initializeForms($('form'));
+        abp.dom.initializers.initializeAutocompleteSelects($('.auto-complete-select'));
         $('[data-auto-focus="true"]').first().findWithSelf('input,select').focus();
+
     });
 
 })(jQuery);