From 3a6abfd294baba752870e95ecf8a5c8234c831f7 Mon Sep 17 00:00:00 2001
From: ben <bennubeig@outlook.com>
Date: Thu, 28 Dec 2023 11:07:48 +0800
Subject: [PATCH 1/5] Add the delay&MinimumInputLength property

---
 .../EasySelector/EasySelectorAttribute.cs      | 18 +++++++++++++-----
 .../TagHelperPlusAbpSelectTagHelperService.cs  |  2 +-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/EasySelector/EasySelectorAttribute.cs b/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/EasySelector/EasySelectorAttribute.cs
index 6b05b46..e36b159 100644
--- a/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/EasySelector/EasySelectorAttribute.cs
+++ b/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/EasySelector/EasySelectorAttribute.cs
@@ -10,7 +10,7 @@ public class EasySelectorAttribute : Attribute
         /// </summary>
         /// <example>/api/identity/users</example>
         public string GetListedDataSourceUrl { get; set; }
-        
+
         /// <summary>
         /// Url to get single data.
         /// Use <code>{id}`</code> as the key.
@@ -27,7 +27,7 @@ public class EasySelectorAttribute : Attribute
         /// Used to be the display text of the option.
         /// </summary>
         public string TextPropertyName { get; set; }
-        
+
         /// <summary>
         /// Used to be the display text of the option if the text property is null.
         /// </summary>
@@ -49,14 +49,18 @@ public class EasySelectorAttribute : Attribute
         /// Hide the sub text (key) of items.
         /// </summary>
         public bool HideSubText { get; set; }
-        
+
         /// <summary>
         /// Please set to true if the item is not in a modal.
         /// </summary>
         public bool RunScriptOnWindowLoad { get; set; }
 
         public string FilterParamName { get; set; }
-        
+
+        public int Delay { get; set; }
+
+        public int MinimumInputLength { get; set; }
+
         public EasySelectorAttribute(
             [NotNull] string getListedDataSourceUrl,
             [NotNull] string getSingleDataSourceUrl,
@@ -68,7 +72,9 @@ public EasySelectorAttribute(
             [NotNull] string filterParamName = "filter",
             int maxResultCount = 10,
             bool hideSubText = false,
-            bool runScriptOnWindowLoad = false)
+            bool runScriptOnWindowLoad = false,
+            int delay = 250,
+            int minimumInputLength = 0)
         {
             GetListedDataSourceUrl = getListedDataSourceUrl;
             GetSingleDataSourceUrl = getSingleDataSourceUrl;
@@ -81,6 +87,8 @@ public EasySelectorAttribute(
             HideSubText = hideSubText;
             RunScriptOnWindowLoad = runScriptOnWindowLoad;
             FilterParamName = filterParamName;
+            Delay = delay;
+            MinimumInputLength = minimumInputLength;
         }
     }
 }
\ No newline at end of file
diff --git a/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/TagHelpers/TagHelperPlusAbpSelectTagHelperService.cs b/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/TagHelpers/TagHelperPlusAbpSelectTagHelperService.cs
index 0570381..450ea60 100644
--- a/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/TagHelpers/TagHelperPlusAbpSelectTagHelperService.cs
+++ b/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/TagHelpers/TagHelperPlusAbpSelectTagHelperService.cs
@@ -132,7 +132,7 @@ protected virtual string GetScriptCode(TagHelperContext context, EasySelectorAtt
             var dropdownParent = easySelectorAttribute.RunScriptOnWindowLoad ? "" : $"dropdownParent: $('#{tagId}').parent().parent(),";
 
             var baseUrl = configuration?.BaseUrl;
-            var innerCode = $"$(function () {{ let currentValues = {_jsonSerializer.Serialize(currentValues)}; function stringMatch(term,candidate){{return candidate&&candidate.toLowerCase().indexOf(term.toLowerCase())>=0}}; function matchCustom(params,data){{if($.trim(params.term)===\"\"){{return data}}if(typeof data.text===\"undefined\"){{return null}}if(stringMatch(params.term,data.text)){{return data}}if(stringMatch(params.term,state.id)){{return data}}return null}}; let select2Item = function (state) {{ return $('<span>' + state.text{subTextContent} + '</span>'); }}; let select2Option = {{ allowClear: true, width: \"100%\", matcher: matchCustom, templateResult: select2Item, templateSelection: select2Item,{dropdownParent} ajax: {{ url: '{baseUrl}{easySelectorAttribute.GetListedDataSourceUrl}', dataType: \"json\", delay: 250, data: function (params) {{ params.page = params.page || 1; return {{ {easySelectorAttribute.FilterParamName}: params.term, skipCount: (params.page - 1) * {easySelectorAttribute.MaxResultCount}, maxResultCount: {easySelectorAttribute.MaxResultCount}, }} }}, processResults: function (data, params) {{ params.page = params.page || 1; return {{ results: data.{easySelectorAttribute.ItemListPropertyName}.map(function (item) {{ return {{ id: item.{easySelectorAttribute.KeyPropertyName}, text: item.{easySelectorAttribute.TextPropertyName} ?? item.{easySelectorAttribute.AlternativeTextPropertyName} }} }}), pagination: {{ more: (params.page * {easySelectorAttribute.MaxResultCount}) < data.totalCount }} }}; }}, cache: true }}, placeholder: {{ id: '', text: '{placeHolder}' }} }}; $(\"#{tagId}\").select2(select2Option); currentValues && currentValues.values.forEach(function(e) {{ if (!$(\"#{tagId}\").find('option:contains(' + e + ')').length && (e != \"00000000-0000-0000-0000-000000000000\" && e != \"\" && e != \"0\")) abp.ajax({{ type: 'GET', url: '{baseUrl}{easySelectorAttribute.GetSingleDataSourceUrl}'.replace('{{id}}', e), success: function (result) {{ $(\"#{tagId}\").append($('<option value=\"' + e + '\">').text(result.{easySelectorAttribute.TextPropertyName} ?? result.{easySelectorAttribute.AlternativeTextPropertyName})); $(\"#{tagId}\").val(currentValues.values).trigger('change'); }}}}); }}); }});";
+            var innerCode = $"$(function () {{ let currentValues = {_jsonSerializer.Serialize(currentValues)}; function stringMatch(term,candidate){{return candidate&&candidate.toLowerCase().indexOf(term.toLowerCase())>=0}}; function matchCustom(params,data){{if($.trim(params.term)===\"\"){{return data}}if(typeof data.text===\"undefined\"){{return null}}if(stringMatch(params.term,data.text)){{return data}}if(stringMatch(params.term,state.id)){{return data}}return null}}; let select2Item = function (state) {{ return $('<span>' + state.text{subTextContent} + '</span>'); }}; let select2Option = {{ allowClear: true,minimumInputLength:{easySelectorAttribute.MinimumInputLength}, width: \"100%\", matcher: matchCustom, templateResult: select2Item, templateSelection: select2Item,{dropdownParent} ajax: {{ url: '{baseUrl}{easySelectorAttribute.GetListedDataSourceUrl}', dataType: \"json\", delay: {easySelectorAttribute.Delay}, data: function (params) {{ params.page = params.page || 1; return {{ {easySelectorAttribute.FilterParamName}: params.term, skipCount: (params.page - 1) * {easySelectorAttribute.MaxResultCount}, maxResultCount: {easySelectorAttribute.MaxResultCount}, }} }}, processResults: function (data, params) {{ params.page = params.page || 1; return {{ results: data.{easySelectorAttribute.ItemListPropertyName}.map(function (item) {{ return {{ id: item.{easySelectorAttribute.KeyPropertyName}, text: item.{easySelectorAttribute.TextPropertyName} ?? item.{easySelectorAttribute.AlternativeTextPropertyName} }} }}), pagination: {{ more: (params.page * {easySelectorAttribute.MaxResultCount}) < data.totalCount }} }}; }}, cache: true }}, placeholder: {{ id: '', text: '{placeHolder}' }} }}; $(\"#{tagId}\").select2(select2Option); currentValues && currentValues.values.forEach(function(e) {{ if (!$(\"#{tagId}\").find('option:contains(' + e + ')').length && (e != \"00000000-0000-0000-0000-000000000000\" && e != \"\" && e != \"0\")) abp.ajax({{ type: 'GET', url: '{baseUrl}{easySelectorAttribute.GetSingleDataSourceUrl}'.replace('{{id}}', e), success: function (result) {{ $(\"#{tagId}\").append($('<option value=\"' + e + '\">').text(result.{easySelectorAttribute.TextPropertyName} ?? result.{easySelectorAttribute.AlternativeTextPropertyName})); $(\"#{tagId}\").val(currentValues.values).trigger('change'); }}}}); }}); }});";
 
             return easySelectorAttribute.RunScriptOnWindowLoad
                 ? $"<script>window.addEventListener('load', function() {{{innerCode}}}, false)</script>"

From 8170965c322c2dd7911f403dfc4f719f22edf9a9 Mon Sep 17 00:00:00 2001
From: ben <bennubeig@outlook.com>
Date: Thu, 28 Dec 2023 11:13:04 +0800
Subject: [PATCH 2/5] [EasySelector] adds a caching function

---
 .../TagHelperPlusAbpSelectTagHelperService.cs      | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/TagHelpers/TagHelperPlusAbpSelectTagHelperService.cs b/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/TagHelpers/TagHelperPlusAbpSelectTagHelperService.cs
index 450ea60..b3a959c 100644
--- a/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/TagHelpers/TagHelperPlusAbpSelectTagHelperService.cs
+++ b/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/TagHelpers/TagHelperPlusAbpSelectTagHelperService.cs
@@ -80,7 +80,7 @@ protected override List<SelectListItem> GetSelectItems(TagHelperContext context,
 
             return easySelectorAttribute != null ? new List<SelectListItem>() : base.GetSelectItems(context, output);
         }
-        
+
         protected override string SurroundInnerHtmlAndGet(TagHelperContext context, TagHelperOutput output, string innerHtml)
         {
             var easySelectorAttribute = TagHelper.AspFor.ModelExplorer.GetAttribute<EasySelectorAttribute>();
@@ -89,7 +89,7 @@ protected override string SurroundInnerHtmlAndGet(TagHelperContext context, TagH
             {
                 return base.SurroundInnerHtmlAndGet(context, output, innerHtml);
             }
-            
+
             return "<div class=\"mb-3 form-group\">" +
                    Environment.NewLine +
                    GetSelect2ConfigurationCode(context, easySelectorAttribute) +
@@ -98,11 +98,11 @@ protected override string SurroundInnerHtmlAndGet(TagHelperContext context, TagH
                    Environment.NewLine +
                    "</div>";
         }
-        
+
         protected virtual string GetSelect2ConfigurationCode(TagHelperContext context, EasySelectorAttribute easySelectorAttribute)
         {
             var styleCode = GetStyleCode(context, easySelectorAttribute);
-            
+
             var scriptCode = GetScriptCode(context, easySelectorAttribute);
 
             return styleCode + scriptCode;
@@ -112,7 +112,7 @@ protected virtual string GetStyleCode(TagHelperContext context, EasySelectorAttr
         {
             return $"<style>.select2-selection__rendered{{line-height:48px !important;padding-left:1.25rem !important;}}.select2-selection__clear{{right:10px}} .select2-container .select2-selection--single{{height:48px !important;}}.select2-selection__arrow{{height:48px !important;right:10px !important}} .selection-subtext {{ padding-left: 10px; color: #808080 !important; font-size: smaller; }}</style>";
         }
-        
+
         protected virtual string GetScriptCode(TagHelperContext context, EasySelectorAttribute easySelectorAttribute)
         {
             var currentValues = context.Items.First(x => !(x.Key is string)).Value;
@@ -131,8 +131,10 @@ protected virtual string GetScriptCode(TagHelperContext context, EasySelectorAtt
 
             var dropdownParent = easySelectorAttribute.RunScriptOnWindowLoad ? "" : $"dropdownParent: $('#{tagId}').parent().parent(),";
 
+            var transport = $"transport: function (params, success, failure) {{if (typeof {tagId.ToCamelCase()}cacheList === 'undefined') {{{tagId.ToCamelCase()}cacheList = {{ totalCount: 0, {easySelectorAttribute.ItemListPropertyName}: [] }};}}if (!params.data || params.data.filter == '' && {tagId.ToCamelCase()}cacheList) return success({tagId.ToCamelCase()}cacheList);let matchList = {tagId.ToCamelCase()}cacheList.{easySelectorAttribute.ItemListPropertyName}.filter(function (item) {{return params.data.filter == undefined||stringMatch(params.data.filter, item.{easySelectorAttribute.TextPropertyName}?? item.{easySelectorAttribute.AlternativeTextPropertyName});}});if (params.data && matchList.length > params.data.skipCount) return success({{ totalCount: matchList.length, {easySelectorAttribute.ItemListPropertyName}: matchList.slice(params.data.skipCount, params.data.skipCount + params.data.maxResultCount) }});var $request = $.ajax(params);$request.then((res) => {{if (params.data.skipCount == 0) {{ {tagId.ToCamelCase()}cacheList = res; }} else {{ {tagId.ToCamelCase()}cacheList.{easySelectorAttribute.ItemListPropertyName} = {tagId.ToCamelCase()}cacheList.{easySelectorAttribute.ItemListPropertyName}.concat(res.{easySelectorAttribute.ItemListPropertyName}); }}success(res);}});$request.fail(failure);return $request;}}";
+
             var baseUrl = configuration?.BaseUrl;
-            var innerCode = $"$(function () {{ let currentValues = {_jsonSerializer.Serialize(currentValues)}; function stringMatch(term,candidate){{return candidate&&candidate.toLowerCase().indexOf(term.toLowerCase())>=0}}; function matchCustom(params,data){{if($.trim(params.term)===\"\"){{return data}}if(typeof data.text===\"undefined\"){{return null}}if(stringMatch(params.term,data.text)){{return data}}if(stringMatch(params.term,state.id)){{return data}}return null}}; let select2Item = function (state) {{ return $('<span>' + state.text{subTextContent} + '</span>'); }}; let select2Option = {{ allowClear: true,minimumInputLength:{easySelectorAttribute.MinimumInputLength}, width: \"100%\", matcher: matchCustom, templateResult: select2Item, templateSelection: select2Item,{dropdownParent} ajax: {{ url: '{baseUrl}{easySelectorAttribute.GetListedDataSourceUrl}', dataType: \"json\", delay: {easySelectorAttribute.Delay}, data: function (params) {{ params.page = params.page || 1; return {{ {easySelectorAttribute.FilterParamName}: params.term, skipCount: (params.page - 1) * {easySelectorAttribute.MaxResultCount}, maxResultCount: {easySelectorAttribute.MaxResultCount}, }} }}, processResults: function (data, params) {{ params.page = params.page || 1; return {{ results: data.{easySelectorAttribute.ItemListPropertyName}.map(function (item) {{ return {{ id: item.{easySelectorAttribute.KeyPropertyName}, text: item.{easySelectorAttribute.TextPropertyName} ?? item.{easySelectorAttribute.AlternativeTextPropertyName} }} }}), pagination: {{ more: (params.page * {easySelectorAttribute.MaxResultCount}) < data.totalCount }} }}; }}, cache: true }}, placeholder: {{ id: '', text: '{placeHolder}' }} }}; $(\"#{tagId}\").select2(select2Option); currentValues && currentValues.values.forEach(function(e) {{ if (!$(\"#{tagId}\").find('option:contains(' + e + ')').length && (e != \"00000000-0000-0000-0000-000000000000\" && e != \"\" && e != \"0\")) abp.ajax({{ type: 'GET', url: '{baseUrl}{easySelectorAttribute.GetSingleDataSourceUrl}'.replace('{{id}}', e), success: function (result) {{ $(\"#{tagId}\").append($('<option value=\"' + e + '\">').text(result.{easySelectorAttribute.TextPropertyName} ?? result.{easySelectorAttribute.AlternativeTextPropertyName})); $(\"#{tagId}\").val(currentValues.values).trigger('change'); }}}}); }}); }});";
+            var innerCode = $"$(function () {{ let currentValues = {_jsonSerializer.Serialize(currentValues)}; function stringMatch(term,candidate){{return candidate&&candidate.toLowerCase().indexOf(term.toLowerCase())>=0}}; function matchCustom(params,data){{if($.trim(params.term)===\"\"){{return data}}if(typeof data.text===\"undefined\"){{return null}}if(stringMatch(params.term,data.text)){{return data}}if(stringMatch(params.term,state.id)){{return data}}return null}}; let select2Item = function (state) {{ return $('<span>' + state.text{subTextContent} + '</span>'); }}; let select2Option = {{ allowClear: true,minimumInputLength:{easySelectorAttribute.MinimumInputLength}, width: \"100%\", matcher: matchCustom, templateResult: select2Item, templateSelection: select2Item,{dropdownParent} ajax: {{ url: '{baseUrl}{easySelectorAttribute.GetListedDataSourceUrl}', dataType: \"json\", delay: {easySelectorAttribute.Delay}, data: function (params) {{ params.page = params.page || 1; return {{ {easySelectorAttribute.FilterParamName}: params.term, skipCount: (params.page - 1) * {easySelectorAttribute.MaxResultCount}, maxResultCount: {easySelectorAttribute.MaxResultCount}, }} }},{transport}, processResults: function (data, params) {{ params.page = params.page || 1; return {{ results: data.{easySelectorAttribute.ItemListPropertyName}.map(function (item) {{ return {{ id: item.{easySelectorAttribute.KeyPropertyName}, text: item.{easySelectorAttribute.TextPropertyName} ?? item.{easySelectorAttribute.AlternativeTextPropertyName} }} }}), pagination: {{ more: (params.page * {easySelectorAttribute.MaxResultCount}) < data.totalCount }} }}; }}, cache: true }}, placeholder: {{ id: '', text: '{placeHolder}' }} }}; $(\"#{tagId}\").select2(select2Option); currentValues && currentValues.values.forEach(function(e) {{ if (!$(\"#{tagId}\").find('option:contains(' + e + ')').length && (e != \"00000000-0000-0000-0000-000000000000\" && e != \"\" && e != \"0\")) abp.ajax({{ type: 'GET', url: '{baseUrl}{easySelectorAttribute.GetSingleDataSourceUrl}'.replace('{{id}}', e), success: function (result) {{ $(\"#{tagId}\").append($('<option value=\"' + e + '\">').text(result.{easySelectorAttribute.TextPropertyName} ?? result.{easySelectorAttribute.AlternativeTextPropertyName})); $(\"#{tagId}\").val(currentValues.values).trigger('change'); }}}}); }}); }});";
 
             return easySelectorAttribute.RunScriptOnWindowLoad
                 ? $"<script>window.addEventListener('load', function() {{{innerCode}}}, false)</script>"

From c9656521f0eca1602bb9f4814aa98847e5d8e86c Mon Sep 17 00:00:00 2001
From: ben <bennubeig@outlook.com>
Date: Fri, 29 Dec 2023 17:14:24 +0800
Subject: [PATCH 3/5] Introducing new attributes enableCache & optimize cache
 logic

---
 .../Pages/Books/Book2/ViewModels/SearchBookViewModel.cs     | 5 ++++-
 .../Abp/TagHelperPlus/EasySelector/EasySelectorAttribute.cs | 6 +++++-
 .../TagHelpers/TagHelperPlusAbpSelectTagHelperService.cs    | 4 ++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/host/EasyAbp.Abp.TagHelperPlus.Web.Unified/Pages/Books/Book2/ViewModels/SearchBookViewModel.cs b/host/EasyAbp.Abp.TagHelperPlus.Web.Unified/Pages/Books/Book2/ViewModels/SearchBookViewModel.cs
index 1599a29..d481440 100644
--- a/host/EasyAbp.Abp.TagHelperPlus.Web.Unified/Pages/Books/Book2/ViewModels/SearchBookViewModel.cs
+++ b/host/EasyAbp.Abp.TagHelperPlus.Web.Unified/Pages/Books/Book2/ViewModels/SearchBookViewModel.cs
@@ -14,7 +14,10 @@ public class SearchBookViewModel
             textPropertyName: "name",
             alternativeTextPropertyName: "userName",
             hideSubText: false,
-            runScriptOnWindowLoad: true // Please set to true if the item is not in a modal.
+            runScriptOnWindowLoad: true, // Please set to true if the item is not in a modal.            
+            minimumInputLength: 1, // The minimum number of characters required to start a search
+            delay: 500, // The delay time between the last key stroke and the request is sent to the server
+            enableCache: true // Enable cache to reduce the number of requests
         )]
         public Guid UserId { get; set; }
 
diff --git a/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/EasySelector/EasySelectorAttribute.cs b/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/EasySelector/EasySelectorAttribute.cs
index e36b159..bbb1506 100644
--- a/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/EasySelector/EasySelectorAttribute.cs
+++ b/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/EasySelector/EasySelectorAttribute.cs
@@ -61,6 +61,8 @@ public class EasySelectorAttribute : Attribute
 
         public int MinimumInputLength { get; set; }
 
+        public bool EnableCache { get; set; }
+
         public EasySelectorAttribute(
             [NotNull] string getListedDataSourceUrl,
             [NotNull] string getSingleDataSourceUrl,
@@ -74,7 +76,8 @@ public EasySelectorAttribute(
             bool hideSubText = false,
             bool runScriptOnWindowLoad = false,
             int delay = 250,
-            int minimumInputLength = 0)
+            int minimumInputLength = 0,
+            bool enableCache = false)
         {
             GetListedDataSourceUrl = getListedDataSourceUrl;
             GetSingleDataSourceUrl = getSingleDataSourceUrl;
@@ -89,6 +92,7 @@ public EasySelectorAttribute(
             FilterParamName = filterParamName;
             Delay = delay;
             MinimumInputLength = minimumInputLength;
+            EnableCache = enableCache;
         }
     }
 }
\ No newline at end of file
diff --git a/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/TagHelpers/TagHelperPlusAbpSelectTagHelperService.cs b/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/TagHelpers/TagHelperPlusAbpSelectTagHelperService.cs
index b3a959c..0a17134 100644
--- a/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/TagHelpers/TagHelperPlusAbpSelectTagHelperService.cs
+++ b/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/TagHelpers/TagHelperPlusAbpSelectTagHelperService.cs
@@ -131,10 +131,10 @@ protected virtual string GetScriptCode(TagHelperContext context, EasySelectorAtt
 
             var dropdownParent = easySelectorAttribute.RunScriptOnWindowLoad ? "" : $"dropdownParent: $('#{tagId}').parent().parent(),";
 
-            var transport = $"transport: function (params, success, failure) {{if (typeof {tagId.ToCamelCase()}cacheList === 'undefined') {{{tagId.ToCamelCase()}cacheList = {{ totalCount: 0, {easySelectorAttribute.ItemListPropertyName}: [] }};}}if (!params.data || params.data.filter == '' && {tagId.ToCamelCase()}cacheList) return success({tagId.ToCamelCase()}cacheList);let matchList = {tagId.ToCamelCase()}cacheList.{easySelectorAttribute.ItemListPropertyName}.filter(function (item) {{return params.data.filter == undefined||stringMatch(params.data.filter, item.{easySelectorAttribute.TextPropertyName}?? item.{easySelectorAttribute.AlternativeTextPropertyName});}});if (params.data && matchList.length > params.data.skipCount) return success({{ totalCount: matchList.length, {easySelectorAttribute.ItemListPropertyName}: matchList.slice(params.data.skipCount, params.data.skipCount + params.data.maxResultCount) }});var $request = $.ajax(params);$request.then((res) => {{if (params.data.skipCount == 0) {{ {tagId.ToCamelCase()}cacheList = res; }} else {{ {tagId.ToCamelCase()}cacheList.{easySelectorAttribute.ItemListPropertyName} = {tagId.ToCamelCase()}cacheList.{easySelectorAttribute.ItemListPropertyName}.concat(res.{easySelectorAttribute.ItemListPropertyName}); }}success(res);}});$request.fail(failure);return $request;}}";
+            var transport = easySelectorAttribute.EnableCache ? $",transport:function(params,success,failure){{if(!params.data.filter&&params.data.skipCount<{tagId.ToCamelCase()}cacheList.length){{return success({{totalCount:params.data.maxResultCount*2,{easySelectorAttribute.ItemListPropertyName}:{tagId.ToCamelCase()}cacheList}});}}if(params.data.filter&&{tagId.ToCamelCase()}cacheList.length&&params.data.skipCount<params.data.maxResultCount){{let matchList={tagId.ToCamelCase()}cacheList.filter(function(item){{return!params.data.filter||stringMatch(params.data.filter,item.name??item.userName);}});if(matchList.length>params.data.skipCount)return success({{totalCount:params.data.maxResultCount*2,{easySelectorAttribute.ItemListPropertyName}:matchList}});}}if(params.data.skipCount != 0 && {tagId.ToCamelCase()}cacheList.length > params.data.skipCount - params.data.maxResultCount){{params.data.skipCount -= params.data.maxResultCount;}}var $request=$.ajax(params);$request.then((res)=>{{res.{easySelectorAttribute.ItemListPropertyName} = res.{easySelectorAttribute.ItemListPropertyName}.filter(v => {{ return {tagId.ToCamelCase()}cacheList.every(e => e.{easySelectorAttribute.KeyPropertyName} != v.{easySelectorAttribute.KeyPropertyName}); }});{tagId.ToCamelCase()}cacheList = [...{tagId.ToCamelCase()}cacheList, ...res.{easySelectorAttribute.ItemListPropertyName}];success(res);}});$request.fail(failure);return $request;}}" : "";
 
             var baseUrl = configuration?.BaseUrl;
-            var innerCode = $"$(function () {{ let currentValues = {_jsonSerializer.Serialize(currentValues)}; function stringMatch(term,candidate){{return candidate&&candidate.toLowerCase().indexOf(term.toLowerCase())>=0}}; function matchCustom(params,data){{if($.trim(params.term)===\"\"){{return data}}if(typeof data.text===\"undefined\"){{return null}}if(stringMatch(params.term,data.text)){{return data}}if(stringMatch(params.term,state.id)){{return data}}return null}}; let select2Item = function (state) {{ return $('<span>' + state.text{subTextContent} + '</span>'); }}; let select2Option = {{ allowClear: true,minimumInputLength:{easySelectorAttribute.MinimumInputLength}, width: \"100%\", matcher: matchCustom, templateResult: select2Item, templateSelection: select2Item,{dropdownParent} ajax: {{ url: '{baseUrl}{easySelectorAttribute.GetListedDataSourceUrl}', dataType: \"json\", delay: {easySelectorAttribute.Delay}, data: function (params) {{ params.page = params.page || 1; return {{ {easySelectorAttribute.FilterParamName}: params.term, skipCount: (params.page - 1) * {easySelectorAttribute.MaxResultCount}, maxResultCount: {easySelectorAttribute.MaxResultCount}, }} }},{transport}, processResults: function (data, params) {{ params.page = params.page || 1; return {{ results: data.{easySelectorAttribute.ItemListPropertyName}.map(function (item) {{ return {{ id: item.{easySelectorAttribute.KeyPropertyName}, text: item.{easySelectorAttribute.TextPropertyName} ?? item.{easySelectorAttribute.AlternativeTextPropertyName} }} }}), pagination: {{ more: (params.page * {easySelectorAttribute.MaxResultCount}) < data.totalCount }} }}; }}, cache: true }}, placeholder: {{ id: '', text: '{placeHolder}' }} }}; $(\"#{tagId}\").select2(select2Option); currentValues && currentValues.values.forEach(function(e) {{ if (!$(\"#{tagId}\").find('option:contains(' + e + ')').length && (e != \"00000000-0000-0000-0000-000000000000\" && e != \"\" && e != \"0\")) abp.ajax({{ type: 'GET', url: '{baseUrl}{easySelectorAttribute.GetSingleDataSourceUrl}'.replace('{{id}}', e), success: function (result) {{ $(\"#{tagId}\").append($('<option value=\"' + e + '\">').text(result.{easySelectorAttribute.TextPropertyName} ?? result.{easySelectorAttribute.AlternativeTextPropertyName})); $(\"#{tagId}\").val(currentValues.values).trigger('change'); }}}}); }}); }});";
+            var innerCode = $"$(function () {{ let {tagId.ToCamelCase()}cacheList = [];let currentValues = {_jsonSerializer.Serialize(currentValues)}; function stringMatch(term,candidate){{return candidate&&candidate.toLowerCase().indexOf(term.toLowerCase())>=0}}; function matchCustom(params,data){{if($.trim(params.term)===\"\"){{return data}}if(typeof data.text===\"undefined\"){{return null}}if(stringMatch(params.term,data.text)){{return data}}if(stringMatch(params.term,state.id)){{return data}}return null}}; let select2Item = function (state) {{ return $('<span>' + state.text{subTextContent} + '</span>'); }}; let select2Option = {{ allowClear: true,minimumInputLength:{easySelectorAttribute.MinimumInputLength}, width: \"100%\", matcher: matchCustom, templateResult: select2Item, templateSelection: select2Item,{dropdownParent} ajax: {{ url: '{baseUrl}{easySelectorAttribute.GetListedDataSourceUrl}', dataType: \"json\", delay: {easySelectorAttribute.Delay}, data: function (params) {{ params.page = params.page || 1; return {{ {easySelectorAttribute.FilterParamName}: params.term, skipCount: (params.page - 1) * {easySelectorAttribute.MaxResultCount}, maxResultCount: {easySelectorAttribute.MaxResultCount}, }} }}{transport}, processResults: function (data, params) {{ params.page = params.page || 1; return {{ results: data.{easySelectorAttribute.ItemListPropertyName}.map(function (item) {{ return {{ id: item.{easySelectorAttribute.KeyPropertyName}, text: item.{easySelectorAttribute.TextPropertyName} ?? item.{easySelectorAttribute.AlternativeTextPropertyName} }} }}), pagination: {{ more: (params.page * {easySelectorAttribute.MaxResultCount}) < data.totalCount }} }}; }}, cache: true }}, placeholder: {{ id: '', text: '{placeHolder}' }} }}; $(\"#{tagId}\").select2(select2Option); currentValues && currentValues.values.forEach(function(e) {{ if (!$(\"#{tagId}\").find('option:contains(' + e + ')').length && (e != \"00000000-0000-0000-0000-000000000000\" && e != \"\" && e != \"0\")) abp.ajax({{ type: 'GET', url: '{baseUrl}{easySelectorAttribute.GetSingleDataSourceUrl}'.replace('{{id}}', e), success: function (result) {{ $(\"#{tagId}\").append($('<option value=\"' + e + '\">').text(result.{easySelectorAttribute.TextPropertyName} ?? result.{easySelectorAttribute.AlternativeTextPropertyName})); $(\"#{tagId}\").val(currentValues.values).trigger('change'); }}}}); }}); }});";
 
             return easySelectorAttribute.RunScriptOnWindowLoad
                 ? $"<script>window.addEventListener('load', function() {{{innerCode}}}, false)</script>"

From 46c0691c8c715d64866ddf7cae04b24dfbad9e39 Mon Sep 17 00:00:00 2001
From: ben <bennubeig@outlook.com>
Date: Fri, 29 Dec 2023 17:26:01 +0800
Subject: [PATCH 4/5] Optimized cache loading

---
 .../Pages/Books/Book2/ViewModels/SearchBookViewModel.cs         | 2 +-
 .../TagHelpers/TagHelperPlusAbpSelectTagHelperService.cs        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/host/EasyAbp.Abp.TagHelperPlus.Web.Unified/Pages/Books/Book2/ViewModels/SearchBookViewModel.cs b/host/EasyAbp.Abp.TagHelperPlus.Web.Unified/Pages/Books/Book2/ViewModels/SearchBookViewModel.cs
index d481440..8814545 100644
--- a/host/EasyAbp.Abp.TagHelperPlus.Web.Unified/Pages/Books/Book2/ViewModels/SearchBookViewModel.cs
+++ b/host/EasyAbp.Abp.TagHelperPlus.Web.Unified/Pages/Books/Book2/ViewModels/SearchBookViewModel.cs
@@ -15,7 +15,7 @@ public class SearchBookViewModel
             alternativeTextPropertyName: "userName",
             hideSubText: false,
             runScriptOnWindowLoad: true, // Please set to true if the item is not in a modal.            
-            minimumInputLength: 1, // The minimum number of characters required to start a search
+            //minimumInputLength: 1, // The minimum number of characters required to start a search
             delay: 500, // The delay time between the last key stroke and the request is sent to the server
             enableCache: true // Enable cache to reduce the number of requests
         )]
diff --git a/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/TagHelpers/TagHelperPlusAbpSelectTagHelperService.cs b/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/TagHelpers/TagHelperPlusAbpSelectTagHelperService.cs
index 0a17134..4059a1d 100644
--- a/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/TagHelpers/TagHelperPlusAbpSelectTagHelperService.cs
+++ b/src/EasyAbp.Abp.TagHelperPlus/EasyAbp/Abp/TagHelperPlus/TagHelpers/TagHelperPlusAbpSelectTagHelperService.cs
@@ -131,7 +131,7 @@ protected virtual string GetScriptCode(TagHelperContext context, EasySelectorAtt
 
             var dropdownParent = easySelectorAttribute.RunScriptOnWindowLoad ? "" : $"dropdownParent: $('#{tagId}').parent().parent(),";
 
-            var transport = easySelectorAttribute.EnableCache ? $",transport:function(params,success,failure){{if(!params.data.filter&&params.data.skipCount<{tagId.ToCamelCase()}cacheList.length){{return success({{totalCount:params.data.maxResultCount*2,{easySelectorAttribute.ItemListPropertyName}:{tagId.ToCamelCase()}cacheList}});}}if(params.data.filter&&{tagId.ToCamelCase()}cacheList.length&&params.data.skipCount<params.data.maxResultCount){{let matchList={tagId.ToCamelCase()}cacheList.filter(function(item){{return!params.data.filter||stringMatch(params.data.filter,item.name??item.userName);}});if(matchList.length>params.data.skipCount)return success({{totalCount:params.data.maxResultCount*2,{easySelectorAttribute.ItemListPropertyName}:matchList}});}}if(params.data.skipCount != 0 && {tagId.ToCamelCase()}cacheList.length > params.data.skipCount - params.data.maxResultCount){{params.data.skipCount -= params.data.maxResultCount;}}var $request=$.ajax(params);$request.then((res)=>{{res.{easySelectorAttribute.ItemListPropertyName} = res.{easySelectorAttribute.ItemListPropertyName}.filter(v => {{ return {tagId.ToCamelCase()}cacheList.every(e => e.{easySelectorAttribute.KeyPropertyName} != v.{easySelectorAttribute.KeyPropertyName}); }});{tagId.ToCamelCase()}cacheList = [...{tagId.ToCamelCase()}cacheList, ...res.{easySelectorAttribute.ItemListPropertyName}];success(res);}});$request.fail(failure);return $request;}}" : "";
+            var transport = easySelectorAttribute.EnableCache ? $",transport:function(params,success,failure){{if(!params.data.filter&&params.data.skipCount<{tagId.ToCamelCase()}cacheList.length){{return success({{totalCount:{tagId.ToCamelCase()}cacheList.length,{easySelectorAttribute.ItemListPropertyName}:{tagId.ToCamelCase()}cacheList}});}}if(params.data.filter&&{tagId.ToCamelCase()}cacheList.length&&params.data.skipCount<params.data.maxResultCount){{let matchList={tagId.ToCamelCase()}cacheList.filter(function(item){{return!params.data.filter||stringMatch(params.data.filter,item.name??item.userName);}});if(matchList.length>params.data.skipCount)return success({{totalCount:params.data.maxResultCount*2,{easySelectorAttribute.ItemListPropertyName}:matchList}});}}if(params.data.skipCount != 0 && {tagId.ToCamelCase()}cacheList.length > params.data.skipCount - params.data.maxResultCount){{params.data.skipCount -= params.data.maxResultCount;}}var $request=$.ajax(params);$request.then((res)=>{{res.{easySelectorAttribute.ItemListPropertyName} = res.{easySelectorAttribute.ItemListPropertyName}.filter(v => {{ return {tagId.ToCamelCase()}cacheList.every(e => e.{easySelectorAttribute.KeyPropertyName} != v.{easySelectorAttribute.KeyPropertyName}); }});{tagId.ToCamelCase()}cacheList = [...{tagId.ToCamelCase()}cacheList, ...res.{easySelectorAttribute.ItemListPropertyName}];success(res);}});$request.fail(failure);return $request;}}" : "";
 
             var baseUrl = configuration?.BaseUrl;
             var innerCode = $"$(function () {{ let {tagId.ToCamelCase()}cacheList = [];let currentValues = {_jsonSerializer.Serialize(currentValues)}; function stringMatch(term,candidate){{return candidate&&candidate.toLowerCase().indexOf(term.toLowerCase())>=0}}; function matchCustom(params,data){{if($.trim(params.term)===\"\"){{return data}}if(typeof data.text===\"undefined\"){{return null}}if(stringMatch(params.term,data.text)){{return data}}if(stringMatch(params.term,state.id)){{return data}}return null}}; let select2Item = function (state) {{ return $('<span>' + state.text{subTextContent} + '</span>'); }}; let select2Option = {{ allowClear: true,minimumInputLength:{easySelectorAttribute.MinimumInputLength}, width: \"100%\", matcher: matchCustom, templateResult: select2Item, templateSelection: select2Item,{dropdownParent} ajax: {{ url: '{baseUrl}{easySelectorAttribute.GetListedDataSourceUrl}', dataType: \"json\", delay: {easySelectorAttribute.Delay}, data: function (params) {{ params.page = params.page || 1; return {{ {easySelectorAttribute.FilterParamName}: params.term, skipCount: (params.page - 1) * {easySelectorAttribute.MaxResultCount}, maxResultCount: {easySelectorAttribute.MaxResultCount}, }} }}{transport}, processResults: function (data, params) {{ params.page = params.page || 1; return {{ results: data.{easySelectorAttribute.ItemListPropertyName}.map(function (item) {{ return {{ id: item.{easySelectorAttribute.KeyPropertyName}, text: item.{easySelectorAttribute.TextPropertyName} ?? item.{easySelectorAttribute.AlternativeTextPropertyName} }} }}), pagination: {{ more: (params.page * {easySelectorAttribute.MaxResultCount}) < data.totalCount }} }}; }}, cache: true }}, placeholder: {{ id: '', text: '{placeHolder}' }} }}; $(\"#{tagId}\").select2(select2Option); currentValues && currentValues.values.forEach(function(e) {{ if (!$(\"#{tagId}\").find('option:contains(' + e + ')').length && (e != \"00000000-0000-0000-0000-000000000000\" && e != \"\" && e != \"0\")) abp.ajax({{ type: 'GET', url: '{baseUrl}{easySelectorAttribute.GetSingleDataSourceUrl}'.replace('{{id}}', e), success: function (result) {{ $(\"#{tagId}\").append($('<option value=\"' + e + '\">').text(result.{easySelectorAttribute.TextPropertyName} ?? result.{easySelectorAttribute.AlternativeTextPropertyName})); $(\"#{tagId}\").val(currentValues.values).trigger('change'); }}}}); }}); }});";

From 6b41a2ff0fce8f7e156bbdfb62c29a2f3f727a84 Mon Sep 17 00:00:00 2001
From: ben <bennubeig@outlook.com>
Date: Fri, 29 Dec 2023 17:46:00 +0800
Subject: [PATCH 5/5] update demo model

---
 .../Pages/Books/Book2/ViewModels/SearchBookViewModel.cs         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/host/EasyAbp.Abp.TagHelperPlus.Web.Unified/Pages/Books/Book2/ViewModels/SearchBookViewModel.cs b/host/EasyAbp.Abp.TagHelperPlus.Web.Unified/Pages/Books/Book2/ViewModels/SearchBookViewModel.cs
index 8814545..d481440 100644
--- a/host/EasyAbp.Abp.TagHelperPlus.Web.Unified/Pages/Books/Book2/ViewModels/SearchBookViewModel.cs
+++ b/host/EasyAbp.Abp.TagHelperPlus.Web.Unified/Pages/Books/Book2/ViewModels/SearchBookViewModel.cs
@@ -15,7 +15,7 @@ public class SearchBookViewModel
             alternativeTextPropertyName: "userName",
             hideSubText: false,
             runScriptOnWindowLoad: true, // Please set to true if the item is not in a modal.            
-            //minimumInputLength: 1, // The minimum number of characters required to start a search
+            minimumInputLength: 1, // The minimum number of characters required to start a search
             delay: 500, // The delay time between the last key stroke and the request is sent to the server
             enableCache: true // Enable cache to reduce the number of requests
         )]