refactor(Select): redesign IsFixedSearch UI layout

src/BootstrapBlazor.Server/Components/Samples/Selects.razor

@@ -316,21 +316,27 @@
            Introduction="@Localizer["SelectsShowSearchIntro"]"
            Name="ShowSearch">
     <section ignore>
-        <div class="row mb-3">
+        <div class="row g-3">
             <div class="col-12 col-sm-6">
                 <BootstrapInputGroup>
                     <BootstrapInputGroupLabel DisplayText="IsClearable" />
                     <Checkbox @bind-Value="@_isShowSearchClearable" />
                 </BootstrapInputGroup>
             </div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="IsFixedSearch" />
+                    <Checkbox @bind-Value="@_isFixedSearch" />
+                </BootstrapInputGroup>
+            </div>
         </div>
     </section>
-    <div class="row g-3 mt-3">
+    <div class="row g-3">
         <div class="col-12 col-sm-6">
-            <Select TValue="string" Items="Items" ShowSearch="true" IsClearable="_isShowSearchClearable" />
+            <Select TValue="string" Items="Items" ShowSearch="true" IsClearable="_isShowSearchClearable" IsFixedSearch="_isFixedSearch" />
         </div>
         <div class="col-12 col-sm-6">
-            <Select TValue="string" Items="StringItems" ShowSearch="true" IsClearable="_isShowSearchClearable" />
+            <Select TValue="string" Items="StringItems" ShowSearch="true" IsClearable="_isShowSearchClearable" IsFixedSearch="_isFixedSearch" />
         </div>
     </div>
 </DemoBlock>

src/BootstrapBlazor.Server/Components/Samples/Selects.razor.cs

@@ -47,6 +47,8 @@ public sealed partial class Selects
 
     private bool _isShowSearchClearable;
 
+    private bool _isFixedSearch;
+
     private bool _isClearable;
 
     private string? _fooName;
@@ -357,6 +359,14 @@ private AttributeItem[] GetAttributes() =>
             DefaultValue = "false"
         },
         new()
+        {
+            Name = "IsFixedSearch",
+            Description = Localizer["SelectsIsFixedSearch"],
+            Type = "boolean",
+            ValueList = "true / false",
+            DefaultValue = "false"
+        },
+        new()
         {
             Name = "IsDisabled",
             Description = Localizer["SelectsIsDisabled"],

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -3154,7 +3154,7 @@
     "SelectsCustomTemplateTitle": "Custom option templates",
     "SelectsCustomTemplateIntro": "By setting the <code>ItemTemplate</code> you can customize the option rendering style",
     "SelectsShowSearchTitle": "Drop-down box with search box",
-    "SelectsShowSearchIntro": "Controls whether the search box is displayed by setting the <code>ShowSearch</code> property, which is not displayed by default false",
+    "SelectsShowSearchIntro": "Controls whether the search box is displayed by setting the <code>ShowSearch</code> property, which is not displayed by default <b>false</b>. Fixed the search bar by setting <code>IsFixedSearch</code>",
     "SelectsConfirmSelectTitle": "Drop-down box with confirmation",
     "SelectsConfirmSelectIntro": "Block changes to the current value by setting the <code>OnBeforeSelectedItemChange</code> delegate.",
     "SelectsTimeZoneTitle": "Timezone",
@@ -3194,7 +3194,8 @@
     "SelectsGenericDesc": "<p>Please refer to <a href=\"https://github.com/dotnetcore/BootstrapBlazor/issues/4497?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">Design Ideas</a> to understand this feature. In this example, by selecting the drop-down box option, the value obtained is the <code>Foo</code> instance, and the value displayed in the text box on the right is the <code>Address</code> value of the <code>Foo</code> attribute</p><p>In this example, the <code>ValueEqualityComparer</code> and <code>CustomKeyAttribute</code> parameters are not set, and the <code>[Key]</code> tag of the <code>Id</code> attribute of <code>Foo</code> is used for equality judgment</p>",
     "SelectsOnInputChangedCallback": "Callback method for converting input text into corresponding Value in edit mode",
     "TextConvertToValueCallback": "Callback method when input text changes in edit mode",
-    "SelectsIsEditable": "Whether editable"
+    "SelectsIsEditable": "Whether editable",
+    "SelectsIsFixedSearch": "Whether fixed the search box"
   },
   "BootstrapBlazor.Server.Components.Samples.Sliders": {
     "SlidersTitle": "Slider",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -3154,7 +3154,7 @@
     "SelectsCustomTemplateTitle": "自定义选项模板",
     "SelectsCustomTemplateIntro": "通过设置 <code>ItemTemplate</code> 可以自定义选项渲染样式",
     "SelectsShowSearchTitle": "带搜索框的下拉框",
-    "SelectsShowSearchIntro": "通过设置 <code>ShowSearch</code> 属性控制是否显示搜索框，默认为 false 不显示搜索框",
+    "SelectsShowSearchIntro": "通过设置 <code>ShowSearch</code> 属性控制是否显示搜索框，默认为 <b>false</b> 不显示搜索框；通过设置 <code>IsFixedSearch</code> 固定搜索栏",
     "SelectsConfirmSelectTitle": "带确认的下拉框",
     "SelectsConfirmSelectIntro": "通过设置 <code>OnBeforeSelectedItemChange</code> 委托，阻止当前值的改变",
     "SelectsTimeZoneTitle": "时区下拉框",
@@ -3194,7 +3194,8 @@
     "SelectsGenericDesc": "<p>请参考 <a href=\"https://github.com/dotnetcore/BootstrapBlazor/issues/4497?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">设计思路</a> 理解此功能。本例中通过选择下拉框选项，得到的值为 <code>Foo</code> 实例，右侧文本框内显示值为 <code>Foo</code> 属性 <code>Address</code> 值</p><p>本例中未设置 <code>ValueEqualityComparer</code> 以及 <code>CustomKeyAttribute</code> 参数，使用 <code>Foo</code> 属性 <code>Id</code> 的 <code>[Key]</code> 标签进行相等判定</p>",
     "SelectsOnInputChangedCallback": "编辑模式下输入文本转换为对应 Value 回调方法",
     "TextConvertToValueCallback": "编辑模式下输入文本变化时回调方法",
-    "SelectsIsEditable": "是否可编辑"
+    "SelectsIsEditable": "是否可编辑",
+    "SelectsIsFixedSearch": "是否固定搜索栏"
   },
   "BootstrapBlazor.Server.Components.Samples.Sliders": {
     "SlidersTitle": "Slider 滑块",

src/BootstrapBlazor/Components/Select/Select.razor

@@ -30,12 +30,15 @@
         {
             <span class="@ClearClassString" @onclick="OnClearValue"><i class="@ClearIcon"></i></span>
         }
-        <div class="dropdown-menu">
-            <div class="@SearchClassString">
-                <input type="text" class="search-text form-control" autocomplete="off" value="@SearchText" aria-label="search">
-                <i class="@SearchIconString"></i>
-                <i class="@SearchLoadingIconString"></i>
-            </div>
+        <div class="@DropdownMenuClassString">
+            @if (ShowSearch)
+            {
+                <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="@SearchLoadingIconString"></i>
+                </div>
+            }
             @if (IsVirtualize)
             {
                 <div class="dropdown-virtual">
@@ -49,30 +52,32 @@
                     }
                 </div>
             }
+            else if (Rows.Count == 0)
+            {
+                <div class="dropdown-item">@NoSearchDataText</div>
+            }
             else
             {
-                @foreach (var itemGroup in Rows.GroupBy(i => i.GroupName))
-                {
-                    if (!string.IsNullOrEmpty(itemGroup.Key))
+                <div class="dropdown-menu-body">
+                    @foreach (var itemGroup in Rows.GroupBy(i => i.GroupName))
                     {
-                        if (GroupItemTemplate != null)
+                        if (!string.IsNullOrEmpty(itemGroup.Key))
                         {
-                            @GroupItemTemplate(itemGroup.Key)
+                            if (GroupItemTemplate != null)
+                            {
+                                @GroupItemTemplate(itemGroup.Key)
+                            }
+                            else
+                            {
+                                <Divider Text="@itemGroup.Key" />
+                            }
                         }
-                        else
+                        @foreach (var item in itemGroup)
                         {
-                            <Divider Text="@itemGroup.Key" />
+                            @RenderRow(item)
                         }
                     }
-                    @foreach (var item in itemGroup)
-                    {
-                        @RenderRow(item)
-                    }
-                }
-                @if (Rows.Count == 0)
-                {
-                    <div class="dropdown-item">@NoSearchDataText</div>
-                }
+                </div>
             }
         </div>
         @if (!IsPopover)