From 272333d684aeb555a80cfedcf02d6cb1498e21ef Mon Sep 17 00:00:00 2001 From: Ilkay Ilknur Date: Tue, 10 Nov 2020 15:41:28 +0300 Subject: [PATCH] update select tag helper to support autocomplete scenarios. --- .../TagHelpers/Form/AbpSelectTagHelper.cs | 6 +++ .../Form/AbpSelectTagHelperService.cs | 18 +++++++- .../bootstrap/dom-event-handlers.js | 41 ++++++++++++++++++- 3 files changed, 63 insertions(+), 2 deletions(-) diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelper.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelper.cs index 4df9733d83..e27235da91 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelper.cs +++ b/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) { diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs index a33b48d11b..c12904edb5 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs +++ b/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(); diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js index 56869350d5..97e3906a24 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js +++ b/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);