feat: 增加 ShowSearch 参数

Author: ArgoZhang

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

@@ -15,18 +15,34 @@
     {
         <span class="@ClearClassString" @onclick="OnClearValue"><i class="@ClearIcon"></i></span>
     }
-    <div class="dropdown-menu">
-        @foreach (var item in GetProvinces())
+    <div class="dropdown-menu dropdown-menu-city">
+        @if (ShowSearch)
         {
-            <div class="bb-region-city-item">
-                <div class="bb-region-city-title" @onclick="() => OnSelectProvince(item)">@item</div>
-                <ul>
-                    @foreach (var city in GetCities(item))
-                    {
-                        <li class="@GetActiveClass(city)" @onclick="() => OnSelectCity(city)">@city</li>
-                    }
-                </ul>
+            <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>
             </div>
+            <div class="dropdown-menu-city-body">
+                @RenderCities()
+            </div>
+        }
+        else
+        {
+            @RenderCities()
         }
     </div>
 </div>
+
+@code {
+    RenderFragment RenderItem(string item) =>
+    @<div class="bb-region-city-item">
+        <div class="bb-region-city-title" @onclick="() => OnSelectProvince(item)">@item</div>
+        <ul>
+            @foreach (var city in GetCities(item))
+            {
+                <li class="@GetActiveClass(city)" @onclick="() => OnSelectCity(city)">@city</li>
+            }
+        </ul>
+    </div>;
+}

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

@@ -15,15 +15,46 @@ public partial class SelectCity
     [Parameter]
     public bool IsMultiple { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否开启搜索功能 默认 true 开启
+    /// </summary>
+    [Parameter]
+    public bool ShowSearch { get; set; } = true;
+
+    /// <summary>
+    /// Gets or sets the search icon.
+    /// </summary>
+    [Parameter]
+    public string? SearchIcon { get; set; }
+
     private string? ClassString => CssBuilder.Default("select bb-city")
         .AddClass("disabled", IsDisabled)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
+    private string? SearchIconString => CssBuilder.Default("icon search-icon")
+        .AddClass(SearchIcon)
+        .Build();
+
+    private string? ClearIconString => CssBuilder.Default("icon clear-icon")
+        .AddClass(ClearIcon)
+        .Build();
+
     private readonly HashSet<string> _values = [];
+    private string? _searchText;
 
     private string? GetActiveClass(string item) => _values.Contains(item) || CurrentValue == item ? "active" : null;
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+
+        SearchIcon ??= IconTheme.GetIconByKey(ComponentIcons.SelectSearchIcon);
+    }
+
     private async Task OnClearValue()
     {
         if (IsMultiple)
@@ -38,6 +69,20 @@ private async Task OnClearValue()
         }
     }
 
+    private void OnClearSearch()
+    {
+        _searchText = null;
+        StateHasChanged();
+    }
+
+    private RenderFragment RenderCities() => builder =>
+    {
+        foreach (var item in GetProvinces())
+        {
+            builder.AddContent(0, RenderItem(item));
+        }
+    };
+
     private void OnSelectProvince(string province)
     {
         if (!IsMultiple)

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

@@ -6,9 +6,12 @@
         display: none;
     }
 
-.dropdown-menu {
+.dropdown-menu-city {
     --bs-dropdown-padding-y: .5rem;
     --bs-dropdown-padding-x: .5rem;
+    --bb-select-search-padding: .5rem 0;
+    --bb-select-search-icon-right: 12px;
+    --bb-select-search-padding-right: 34px;
     --bb-region-body-color: #495057;
     --bb-region-body-hover-bg-color: #e9ecef;
     --bb-region-body-active-bg-color: #dee2e6;
@@ -22,17 +25,18 @@
     width: var(--bb-region-body-width);
     height: var(--bb-region-body-height);
     overflow-y: auto;
+    flex-direction: column;
 }
 
-    .dropdown-menu ul {
+    .dropdown-menu-city ul {
         margin: 0;
         padding: 0;
         display: flex;
         flex-wrap: wrap;
         gap: var(--bb-region-body-gap);
     }
 
-    .dropdown-menu li {
+    .dropdown-menu-city li {
         list-style: none;
         transition: background-color .3s linear, color .3s linear;
         cursor: pointer;
@@ -41,24 +45,46 @@
         color: var(--bb-region-body-color);
     }
 
-        .dropdown-menu li:hover {
+        .dropdown-menu-city li:hover {
             background-color: var(--bb-region-body-hover-bg-color);
             color: var(--bb-region-body-hover-color);
         }
 
-        .dropdown-menu li.active {
+        .dropdown-menu-city li.active {
             background-color: var(--bb-region-body-active-bg-color);
             color: var(--bb-region-body-active-color);
         }
 
-[data-bs-theme="dark"] .dropdown-menu {
+[data-bs-theme="dark"] .dropdown-menu-city {
     --bb-region-body-color: #c0c4cc;
     --bb-region-body-hover-color: #fff;
     --bb-region-body-active-color: #fff;
     --bb-region-body-hover-bg-color: #495057;
     --bb-region-body-active-bg-color: #6c757d;
 }
 
+.show > .dropdown-menu-city {
+    display: flex;
+}
+
+.dropdown-menu-city-body {
+    flex: 1;
+    height: 1%;
+    overflow-y: auto;
+}
+
+.dropdown-menu-search .clear-icon {
+    cursor: pointer;
+}
+
+.dropdown-menu-search:hover .search-icon {
+    display: none;
+}
+
+.dropdown-menu-search:not(:hover) .clear-icon {
+    display: none;
+}
+
 .bb-region-city-item:not(:last-child) {
     margin-bottom: 3px;
     padding-bottom: 3px;