feat(AutoFill): add IsVirtulize parameter

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

@@ -9,7 +9,8 @@
     <section ignore>
         @((MarkupString)@Localizer["NormalDesc"].Value)
     </section>
-    <AutoFill @bind-Value="Model1" Items="Items1" IsLikeMatch="true" OnGetDisplayText="OnGetDisplayText" class="mb-3" IsSelectAllTextOnFocus="true">
+    <AutoFill @bind-Value="Model1" Items="Items1" class="mb-3"
+              IsLikeMatch="true" OnGetDisplayText="OnGetDisplayText" IsSelectAllTextOnFocus="true">
         <ItemTemplate>
             <div class="d-flex">
                 <div>
@@ -71,4 +72,72 @@
     </section>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["IsVirtualizeTitle"]" Introduction="@Localizer["IsVirtualizeIntro"]" Name="IsVirtualize">
+    <section ignore>
+        <p>@((MarkupString)Localizer["IsVirtualizeDescription"].Value)</p>
+        <div class="row g-3">
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="IsClearable" />
+                    <Checkbox @bind-Value="@_isClearable" />
+                </BootstrapInputGroup>
+            </div>
+        </div>
+    </section>
+
+    <p class="code-label">1. 使用 OnQueryAsync 作为数据源</p>
+    <div class="row mb-3">
+        <div class="col-12">
+            <AutoFill @bind-Value="Model4" OnQueryAsync="OnQueryAsync" OnGetDisplayText="OnGetDisplayText" class="mb-3"
+                      IsSelectAllTextOnFocus="true" OnCustomFilter="OnCustomVirtulizeFilter"
+                      IsVirtualize="true" RowHeight="58f" IsClearable="_isClearable">
+                <ItemTemplate>
+                    <div class="d-flex">
+                        <div>
+                            <img src="@WebsiteOption.CurrentValue.GetAvatarUrl(context.Id)" class="bb-avatar" />
+                        </div>
+                        <div class="ps-2">
+                            <div>@context.Name</div>
+                            <div class="bb-sub">@Foo.GetTitle(context.Id)</div>
+                        </div>
+                    </div>
+                </ItemTemplate>
+            </AutoFill>
+            <section ignore>
+                @if (Model4 != null)
+                {
+                    <EditorForm Model="@Model4" RowType="RowType.Inline" ItemsPerRow="2" />
+                }
+            </section>
+        </div>
+    </div>
+
+    <p class="code-label">2. 使用 Items 作为数据源</p>
+    <div class="row">
+        <div class="col-12">
+            <AutoFill @bind-Value="Model4" Items="Items4" OnGetDisplayText="OnGetDisplayText" class="mb-3"
+                      IsSelectAllTextOnFocus="true" OnCustomFilter="OnCustomVirtulizeFilter"
+                      IsVirtualize="true" RowHeight="58f" IsClearable="_isClearable">
+                <ItemTemplate>
+                    <div class="d-flex">
+                        <div>
+                            <img src="@WebsiteOption.CurrentValue.GetAvatarUrl(context.Id)" class="bb-avatar" />
+                        </div>
+                        <div class="ps-2">
+                            <div>@context.Name</div>
+                            <div class="bb-sub">@Foo.GetTitle(context.Id)</div>
+                        </div>
+                    </div>
+                </ItemTemplate>
+            </AutoFill>
+            <section ignore>
+                @if (Model4 != null)
+                {
+                    <EditorForm Model="@Model4" RowType="RowType.Inline" ItemsPerRow="2" />
+                }
+            </section>
+        </div>
+    </div>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />

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

@@ -15,9 +15,13 @@ partial class AutoFills
 
     [NotNull]
     private Foo Model2 { get; set; } = new();
+
     [NotNull]
     private Foo Model3 { get; set; } = new();
 
+    [NotNull]
+    private Foo Model4 { get; set; } = new();
+
     private static string? OnGetDisplayText(Foo? foo) => foo?.Name;
 
     [NotNull]
@@ -29,10 +33,15 @@ partial class AutoFills
     [NotNull]
     private IEnumerable<Foo>? Items3 { get; set; }
 
+    [NotNull]
+    private IEnumerable<Foo>? Items4 { get; set; }
+
     [Inject]
     [NotNull]
     private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
 
+    private bool _isClearable = true;
+
     /// <inheritdoc/>
     protected override void OnInitialized()
     {
@@ -46,6 +55,9 @@ protected override void OnInitialized()
 
         Items3 = Foo.GenerateFoo(LocalizerFoo);
         Model3 = Items3.First();
+
+        Items4 = Foo.GenerateFoo(LocalizerFoo);
+        Model4 = Items3.First();
     }
 
     private Task<IEnumerable<Foo>> OnCustomFilter(string searchText)
@@ -54,6 +66,27 @@ private Task<IEnumerable<Foo>> OnCustomFilter(string searchText)
         return Task.FromResult(items);
     }
 
+    private Task<IEnumerable<Foo>> OnCustomVirtulizeFilter(string searchText)
+    {
+        var items = string.IsNullOrEmpty(searchText) ? Items4 : Items4.Where(i => i.Name!.Contains(searchText));
+        return Task.FromResult(items);
+    }
+
+    private async Task<QueryData<Foo>> OnQueryAsync(VirtualizeQueryOption option)
+    {
+        await Task.Delay(200);
+        var items = Foo.GenerateFoo(LocalizerFoo);
+        if (!string.IsNullOrEmpty(option.SearchText))
+        {
+            items = [.. items.Where(i => i.Name!.Contains(option.SearchText, StringComparison.OrdinalIgnoreCase))];
+        }
+        return new QueryData<Foo>
+        {
+            Items = items.Skip(option.StartIndex).Take(option.Count),
+            TotalCount = items.Count
+        };
+    }
+
     /// <summary>
     /// Get property method
     /// </summary>
@@ -163,6 +196,14 @@ private AttributeItem[] GetAttributes() =>
             Type = "bool",
             ValueList = "true/false",
             DefaultValue = "false"
+        },
+        new()
+        {
+            Name = nameof(AutoFill<string>.IsVirtualize),
+            Description = Localizer["AttrIsVirtualize"],
+            Type = "bool",
+            ValueList = "true/false",
+            DefaultValue = "false"
         }
     ];
 }

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

@@ -474,6 +474,14 @@ private AttributeItem[] GetAttributes() =>
             Type = "bool",
             ValueList = "true|false",
             DefaultValue = "false"
+        },
+        new()
+        {
+            Name = nameof(MultiSelect<string>.IsVirtualize),
+            Description = Localizer["MultiSelectsAttribute_IsVirtualize"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
         }
     ];
 }

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

@@ -415,6 +415,14 @@ private AttributeItem[] GetAttributes() =>
             Type = "bool",
             ValueList = "true|false",
             DefaultValue = "false"
+        },
+        new()
+        {
+            Name = nameof(Select<string>.IsVirtualize),
+            Description = Localizer["SelectsIsVirtualize"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
         }
     ];
 }

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

@@ -160,12 +160,6 @@
     <TreeView Items="@SearchItems1" ShowSearch="true" OnSearchAsync="@OnSearchAsync"></TreeView>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["TreeViewFixedSearchTitle"]"
-           Introduction="@Localizer["TreeViewFixedSearchIntro"]"
-           Name="IsFixedSearch">
-    <TreeView Items="@SearchItems2" ShowSearch="true" OnSearchAsync="@OnSearchAsync" IsFixedSearch="true" style="height: 180px;"></TreeView>
-</DemoBlock>
-
 <DemoBlock Title="@Localizer["TreeViewMaxSelectedCountTitle"]"
            Introduction="@Localizer["TreeViewMaxSelectedCountIntro"]"
            Name="MaxSelectedCount">

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

@@ -694,8 +694,6 @@
     "TreeViewShowSkeletonButtonText": "Asynchronous loading",
     "TreeViewShowSearchTitle": "Show search",
     "TreeViewShowSearchIntro": "By setting <code>ShowSearch</code> to display the search bar, and using the <code>OnSearchAsync</code> callback method to set the data source to refresh the page",
-    "TreeViewFixedSearchTitle": "Fixed search",
-    "TreeViewFixedSearchIntro": "The search bar can be fixed by setting <code>IsFixedSearch=\"true\"</code>, and the search bar height can be set by the css variable <code>--bb-tree-search-height</code>",
     "TreeViewSetActiveTitle": "Set Active Node",
     "TreeViewSetActiveIntro": "Set the currently active node by calling the <code>SetActiveItem</code> method",
     "TreeViewSetActiveDisplayText": "Current Active Node",
@@ -2153,7 +2151,11 @@
     "Att10": "Whether to expand the dropdown candidate menu when it gains focus",
     "Att11": "Candidate template",
     "Att12": "Whether to skip Enter key handling",
-    "Att13": "Whether to skip Esc key processing"
+    "Att13": "Whether to skip Esc key processing",
+    "IsVirtualizeTitle": "Virtualize",
+    "IsVirtualizeIntro": "Set <code>IsVirtualize</code> to <b>true</b> enable virtual scroll for large data",
+    "IsVirtualizeDescription": "Component virtual scrolling supports two ways of providing data through <code>Items</code> or <code>OnQueryAsync</code> callback methods",
+    "AttrIsVirtualize": "Wether to enable virtualize"
   },
   "BootstrapBlazor.Server.Components.Samples.AutoCompletes": {
     "Title": "AutoComplete",
@@ -3028,7 +3030,8 @@
     "MultiSelectVirtualizeTitle": "Virtualize",
     "MultiSelectVirtualizeIntro": "Set <code>IsVirtualize</code> to <b>true</b> enable virtual scroll for large data",
     "MultiSelectVirtualizeDescription": "Component virtual scrolling supports two ways of providing data through <code>Items</code> or <code>OnQueryAsync</code> callback methods",
-    "MultiSelectsAttribute_ShowSearch": "Whether to display the search box"
+    "MultiSelectsAttribute_ShowSearch": "Whether to display the search box",
+    "MultiSelectsAttribute_IsVirtualize": "Wether to enable virtualize"
   },
   "BootstrapBlazor.Server.Components.Samples.Radios": {
     "RadiosTitle": "Radio",
@@ -3164,7 +3167,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 <b>false</b>. Fixed the search bar by setting <code>IsFixedSearch</code>",
+    "SelectsShowSearchIntro": "Controls whether the search box is displayed by setting the <code>ShowSearch</code> property, which is not displayed by default <b>false</b>",
     "SelectsConfirmSelectTitle": "Drop-down box with confirmation",
     "SelectsConfirmSelectIntro": "Block changes to the current value by setting the <code>OnBeforeSelectedItemChange</code> delegate.",
     "SelectsTimeZoneTitle": "Timezone",
@@ -3204,7 +3207,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",
+    "SelectsIsVirtualize": "Wether to enable virtualize"
   },
   "BootstrapBlazor.Server.Components.Samples.Sliders": {
     "SlidersTitle": "Slider",

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

@@ -694,8 +694,6 @@
     "TreeViewShowSkeletonButtonText": "异步加载",
     "TreeViewShowSearchTitle": "显示搜索栏",
     "TreeViewShowSearchIntro": "通过设置 <code>ShowSearch</code> 显示搜索栏，通过 <code>OnSearchAsync</code> 回调方法设置数据源刷新页面即可",
-    "TreeViewFixedSearchTitle": "固定搜索栏",
-    "TreeViewFixedSearchIntro": "通过设置 <code>IsFixedSearch=\"true\"</code> 固定搜索栏，可通过样式变量 <code>--bb-tree-search-height</code> 设定搜索栏高度",
     "TreeViewSetActiveTitle": "设置激活节点",
     "TreeViewSetActiveIntro": "通过调用 <code>SetActiveItem</code> 方法设置当前激活节点",
     "TreeViewSetActiveDisplayText": "当前激活节点",
@@ -2153,7 +2151,11 @@
     "Att10": "获得焦点时是否展开下拉候选菜单",
     "Att11": "候选项模板",
     "Att12": "是否跳过 Enter 按键处理",
-    "Att13": "是否跳过 Esc 按键处理"
+    "Att13": "是否跳过 Esc 按键处理",
+    "IsVirtualizeTitle": "虚拟滚动",
+    "IsVirtualizeIntro": "通过设置 <code>IsVirtualize</code> 参数开启组件虚拟功能特性",
+    "IsVirtualizeDescription": "组件虚拟滚动支持两种形式通过 <code>Items</code> 或者 <code>OnQueryAsync</code> 回调方法提供数据",
+    "AttrIsVirtualize": "是否开启虚拟滚动"
   },
   "BootstrapBlazor.Server.Components.Samples.AutoCompletes": {
     "Title": "AutoComplete 自动完成",
@@ -3028,7 +3030,8 @@
     "MultiSelectVirtualizeTitle": "虚拟滚动",
     "MultiSelectVirtualizeIntro": "通过设置 <code>IsVirtualize</code> 参数开启组件虚拟功能特性",
     "MultiSelectVirtualizeDescription": "组件虚拟滚动支持两种形式通过 <code>Items</code> 或者 <code>OnQueryAsync</code> 回调方法提供数据",
-    "MultiSelectsAttribute_ShowSearch": "是否显示搜索框"
+    "MultiSelectsAttribute_ShowSearch": "是否显示搜索框",
+    "MultiSelectsAttribute_IsVirtualize": "是否开启虚拟滚动"
   },
   "BootstrapBlazor.Server.Components.Samples.Radios": {
     "RadiosTitle": "Radio 单选框",
@@ -3164,7 +3167,7 @@
     "SelectsCustomTemplateTitle": "自定义选项模板",
     "SelectsCustomTemplateIntro": "通过设置 <code>ItemTemplate</code> 可以自定义选项渲染样式",
     "SelectsShowSearchTitle": "带搜索框的下拉框",
-    "SelectsShowSearchIntro": "通过设置 <code>ShowSearch</code> 属性控制是否显示搜索框，默认为 <b>false</b> 不显示搜索框；通过设置 <code>IsFixedSearch</code> 固定搜索栏",
+    "SelectsShowSearchIntro": "通过设置 <code>ShowSearch</code> 属性控制是否显示搜索框，默认为 <b>false</b> 不显示搜索框",
     "SelectsConfirmSelectTitle": "带确认的下拉框",
     "SelectsConfirmSelectIntro": "通过设置 <code>OnBeforeSelectedItemChange</code> 委托，阻止当前值的改变",
     "SelectsTimeZoneTitle": "时区下拉框",
@@ -3204,7 +3207,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": "是否可编辑",
+    "SelectsIsVirtualize": "是否开启虚拟滚动"
   },
   "BootstrapBlazor.Server.Components.Samples.Sliders": {
     "SlidersTitle": "Slider 滑块",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.5.0-beta05</Version>
+    <Version>9.5.0-beta07</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor

@@ -23,7 +23,7 @@
 
 @code {
     RenderFragment RenderDropdown =>
-    @<ul class="dropdown-menu">
+    @<ul class="dropdown-menu shadow">
         @foreach (var item in Rows)
         {
             <li @key="item" class="dropdown-item" @onclick="() => OnClickItem(item)">

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.scss

@@ -1,10 +1,5 @@
 .auto-complete {
     --bb-ac-padding-right: #{$bb-ac-padding-right};
-    --bb-ac-menu-top: #{$bb-ac-menu-top};
-    --bb-ac-menu-left: #{$bb-ac-menu-left};
-    --bb-ac-menu-right: #{$bb-ac-menu-right};
-    --bb-ac-menu-shadow: #{$bb-ac-menu-shadow};
-    --bb-ac-dropdown-max-height: var(--bb-dropdown-max-height);
     --bb-select-append-width: #{$bb-select-append-width};
     --bb-select-append-color: #{$bb-select-append-color};
     position: relative;
@@ -15,11 +10,7 @@
     }
 
     .dropdown-menu {
-        top: var(--bb-ac-menu-top);
-        left: var(--bb-ac-menu-left);
-        right: var(--bb-ac-menu-right);
-        box-shadow: var(--bb-ac-menu-shadow);
-        max-height: var(--bb-ac-dropdown-max-height);
+        width: 100%;
     }
 
     .ac-loading {