refactor: 增加搜索功能

Author: ArgoZhang

src/components/BootstrapBlazor.Region/Components/SelectCity.razor

@@ -1,6 +1,6 @@
 @namespace BootstrapBlazor.Components
 @inherits SelectRegionBase
-@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.Region/Components/SelectRegion.razor.js")]
+@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.Region/Components/SelectCity.razor.js", JSObjectReference = true)]
 
 @if (IsShowLabel)
 {
@@ -21,9 +21,9 @@
             <div class="dropdown-menu-search">
                 <input type="text" class="search-text form-control" autocomplete="off" value="@_searchText" aria-label="search" />
                 <i class="@SearchIconString"></i>
-                <i class="@ClearIconString" @onclick="OnClearSearch"></i>
+                <i class="@ClearIconString"></i>
             </div>
-            <div class="dropdown-menu-city-body">
+            <div class="dropdown-menu-search-body">
                 @RenderCities()
             </div>
         }

src/components/BootstrapBlazor.Region/Components/SelectCity.razor.cs

@@ -55,6 +55,27 @@ protected override void OnParametersSet()
         SearchIcon ??= IconTheme.GetIconByKey(ComponentIcons.SelectSearchIcon);
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new
+    {
+        TriggerSearch = nameof(TriggerSearch)
+    });
+
+    /// <summary>
+    /// 触发过滤方法 由 Javascript 触发
+    /// </summary>
+    /// <param name="v"></param>
+    /// <returns></returns>
+    [JSInvokable]
+    public void TriggerSearch(string v)
+    {
+        _searchText = v.ToUpperInvariant();
+        StateHasChanged();
+    }
+
     private async Task OnClearValue()
     {
         if (IsMultiple)
@@ -69,12 +90,6 @@ private async Task OnClearValue()
         }
     }
 
-    private void OnClearSearch()
-    {
-        _searchText = null;
-        StateHasChanged();
-    }
-
     private RenderFragment RenderCities() => builder =>
     {
         foreach (var item in GetProvinces())
@@ -119,43 +134,57 @@ private void OnSelectCity(string item)
         }
     }
 
-    private static HashSet<string> GetProvinces()
+    private HashSet<string> GetProvinces()
     {
-        return
-        [
-            "直辖市",
-            "河北省",
-            "山西省",
-            "辽宁省",
-            "吉林省",
-            "黑龙江省",
-            "江苏省",
-            "浙江省",
-            "安徽省",
-            "福建省",
-            "江西省",
-            "山东省",
-            "河南省",
-            "湖北省",
-            "湖南省",
-            "广东省",
-            "海南省",
-            "四川省",
-            "贵州省",
-            "云南省",
-            "陕西省",
-            "甘肃省",
-            "青海省",
-            "内蒙古自治区",
-            "广西壮族自治区",
-            "西藏自治区",
-            "宁夏回族自治区",
-            "新疆维吾尔自治区",
-            "台湾省",
-            "特别行政区"
-        ];
+        if (string.IsNullOrEmpty(_searchText))
+        {
+            return Provinces;
+        }
+
+        // 处理直辖市
+        if (PinYinZXS.Contains(_searchText))
+        {
+            return ["直辖市"];
+        }
+
+        return Provinces;
     }
 
+    private static readonly HashSet<string> PinYinZXS = ["BJ", "TJ", "SH", "CQ"];
+
+    private static readonly HashSet<string> Provinces = [
+        "直辖市",
+        "河北省",
+        "山西省",
+        "辽宁省",
+        "吉林省",
+        "黑龙江省",
+        "江苏省",
+        "浙江省",
+        "安徽省",
+        "福建省",
+        "江西省",
+        "山东省",
+        "河南省",
+        "湖北省",
+        "湖南省",
+        "广东省",
+        "海南省",
+        "四川省",
+        "贵州省",
+        "云南省",
+        "陕西省",
+        "甘肃省",
+        "青海省",
+        "内蒙古自治区",
+        "广西壮族自治区",
+        "西藏自治区",
+        "宁夏回族自治区",
+        "新疆维吾尔自治区",
+        "台湾省",
+        "特别行政区"
+    ];
+
     private static readonly HashSet<string> Municipalities = ["北京市", "天津市", "上海市", "重庆市"];
 
     private static readonly HashSet<string> SpecialAdministrativeRegions = ["香港特别行政区", "澳门特别行政区"];

src/components/BootstrapBlazor.Region/Components/SelectCity.razor.css

@@ -67,12 +67,6 @@
     display: flex;
 }
 
-.dropdown-menu-city-body {
-    flex: 1;
-    height: 1%;
-    overflow-y: auto;
-}
-
 .dropdown-menu-search .clear-icon {
     cursor: pointer;
 }
@@ -85,6 +79,16 @@
     display: none;
 }
 
+.dropdown-menu-search .search-text {
+    text-transform: uppercase;
+}
+
+.dropdown-menu-search-body {
+    flex: 1;
+    height: 1%;
+    overflow-y: auto;
+}
+
 .bb-region-city-item:not(:last-child) {
     margin-bottom: 3px;
     padding-bottom: 3px;

src/components/BootstrapBlazor.Region/Components/SelectCity.razor.js

@@ -0,0 +1,53 @@
+import Data from "../../BootstrapBlazor/modules/data.js"
+import EventHandler from "../../BootstrapBlazor/modules/event-handler.js"
+import Input from "../../BootstrapBlazor/modules/input.js"
+import Popover from "../../BootstrapBlazor/modules/base-popover.js"
+
+export function init(id, invoke, options) {
+    const el = document.getElementById(id)
+    if (el === null) {
+        return
+    }
+    const popover = Popover.init(el);
+
+    const searchInput = el.querySelector(".search-text");
+    if (searchInput) {
+        Input.composition(searchInput, async v => {
+            await invoke.invokeMethodAsync(options.triggerSearch, v);
+        });
+    }
+
+    const search = el.querySelector(".dropdown-menu-search .clear-icon");
+    if (search) {
+        EventHandler.on(search, 'click', async e => {
+            searchInput.value = '';
+            await invoke.invokeMethodAsync(options.triggerSearch, '');
+        });
+    }
+
+    Data.set(id, { el, popover, searchInput, search });
+}
+
+export function hide(id) {
+    const region = Data.get(id)
+    const { popover } = region;
+    if (popover) {
+        popover.hide();
+    }
+}
+
+export function dispose(id) {
+    const region = Data.get(id)
+    Data.remove(id)
+
+    const { popover, searchInput, search } = region;
+    if (popover) {
+        Popover.dispose(popover);
+    }
+    if (searchInput) {
+        Input.dispose(searchInput);
+    }
+    if (search) {
+        EventHandler.off(search, 'click');
+    }
+}