feat(MultiSelect): add IsVirtualize parameter

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

@@ -123,18 +123,24 @@ private enum MultiSelectEnumFoo
                     <Checkbox @bind-Value="@_isFixedSearch" />
                 </BootstrapInputGroup>
             </div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="IsClearable" />
+                    <Checkbox @bind-Value="@_isClearable" />
+                </BootstrapInputGroup>
+            </div>
         </div>
     </section>
 
     <div class="row g-3">
         <div class="col-12 col-sm-6">
             <MultiSelect Items="@Items" @bind-Value="@SelectedSearchItemsValue"
-                         ShowSearch="true" IsFixedSearch="_isFixedSearch" OnSearchTextChanged="@OnSearch">
+                         ShowSearch="true" IsFixedSearch="_isFixedSearch" IsClearable="_isClearable" OnSearchTextChanged="@OnSearch">
             </MultiSelect>
         </div>
         <div class="col-12 col-sm-6">
             <MultiSelect Items="@LongItems" @bind-Value="@SelectedMaxItemsValue"
-                         ShowSearch="true" IsFixedSearch="_isFixedSearch">
+                         ShowSearch="true" IsFixedSearch="_isFixedSearch" IsClearable="_isClearable">
             </MultiSelect>
         </div>
     </div>
@@ -295,6 +301,58 @@ private enum MultiSelectEnumFoo
     </div>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["MultiSelectVirtualizeTitle"]"
+           Introduction="@Localizer["MultiSelectVirtualizeIntro"]"
+           Name="IsVirtualize">
+    <section ignore>
+        <p>@((MarkupString)Localizer["MultiSelectVirtualizeDescription"].Value)</p>
+        <div class="row g-3">
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="ShowSearch" />
+                    <Checkbox @bind-Value="@_showSearch" />
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="IsFixedSearch" />
+                    <Checkbox @bind-Value="@_isFixedSearch" />
+                </BootstrapInputGroup>
+            </div>
+            <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-6">
+            <MultiSelect IsVirtualize="true" @bind-Value="_virtualItemString1" OnQueryAsync="OnQueryAsync"
+                         ShowSearch="_showSearch" IsFixedSearch="_isFixedSearch" IsClearable="_isClearable">
+            </MultiSelect>
+        </div>
+        <div class="col-6">
+            <Display TValue="string" Value="@_virtualItemString1"></Display>
+        </div>
+    </div>
+
+    <p class="code-label">2. 使用 Items 作为数据源</p>
+    <div class="row">
+        <div class="col-6">
+            <MultiSelect IsVirtualize="true" @bind-Value="_virtualItemString2" Items="VirtualItems"
+                         ShowSearch="_showSearch" IsFixedSearch="_isFixedSearch" IsClearable="_isClearable">
+            </MultiSelect>
+        </div>
+        <div class="col-6">
+            <Display TValue="string" Value="@_virtualItemString2"></Display>
+        </div>
+    </div>
+ </DemoBlock>
+
 <AttributeTable Items="@GetAttributes()"></AttributeTable>
 
 <EventTable Items="@GetEvents()"></EventTable>

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

@@ -10,6 +10,10 @@ namespace BootstrapBlazor.Server.Components.Samples;
 /// </summary>
 public partial class MultiSelects
 {
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
+
     /// <summary>
     /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
     /// Foo class is used for Demo tet, please download the source code if necessary
@@ -106,9 +110,20 @@ private enum MultiSelectEnumFoo
 
     private List<SelectedItem> CascadingItems1 { get; set; } = [];
 
+    [NotNull]
+    private List<Foo>? Foos { get; set; }
+
+    private string? _virtualItemString1;
+
+    private string? _virtualItemString2;
+
+    private IEnumerable<SelectedItem> VirtualItems => Foos.Select(i => new SelectedItem(i.Name!, i.Name!)).ToList();
+
     private string? _editString;
 
     private bool _isFixedSearch;
+    private bool _isClearable;
+    private bool _showSearch;
 
     private async Task<SelectedItem> OnEditCallback(string value)
     {
@@ -123,6 +138,21 @@ private async Task<SelectedItem> OnEditCallback(string value)
         return item;
     }
 
+    private async Task<QueryData<SelectedItem>> OnQueryAsync(VirtualizeQueryOption option)
+    {
+        await Task.Delay(200);
+        var items = Foos;
+        if (!string.IsNullOrEmpty(option.SearchText))
+        {
+            items = [.. Foos.Where(i => i.Name!.Contains(option.SearchText, StringComparison.OrdinalIgnoreCase))];
+        }
+        return new QueryData<SelectedItem>
+        {
+            Items = items.Skip(option.StartIndex).Take(option.Count).Select(i => new SelectedItem(i.Name!, i.Name!)),
+            TotalCount = items.Count
+        };
+    }
+
     private SelectedItem[] GroupItems { get; } =
     [
         new("Jilin", "吉林") { GroupName = "东北"},
@@ -142,7 +172,7 @@ private async Task<SelectedItem> OnEditCallback(string value)
     ];
 
     /// <summary>
-    /// OnInitialized
+    /// <inheritdoc/>
     /// </summary>
     protected override void OnInitialized()
     {
@@ -183,6 +213,9 @@ protected override void OnInitialized()
         LongItems = GenerateDataSource(LongDataSource);
 
         Items = GenerateDataSource(DataSource);
+        Foos = Foo.GenerateFoo(LocalizerFoo);
+        _virtualItemString1 = Foos[79].Name;
+        _virtualItemString2 = Foos[45].Name;
     }
 
     private static List<SelectedItem> GenerateItems() =>
@@ -198,7 +231,7 @@ private static List<SelectedItem> GenerateItems() =>
         new ("Lianyungang", "连云港")
     ];
 
-    private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();
+    private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => [.. source.Select(i => new SelectedItem(i.Value, i.Text))];
 
     private void AddItems()
     {

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

@@ -433,13 +433,19 @@
            Name="IsVirtualize">
     <section ignore>
         <p>@((MarkupString)Localizer["SelectsVirtualizeDescription"].Value)</p>
-        <div class="row mb-3">
+        <div class="row g-3">
             <div class="col-12 col-sm-6">
                 <BootstrapInputGroup>
                     <BootstrapInputGroupLabel DisplayText="ShowSearch" />
                     <Checkbox @bind-Value="@_showSearch" />
                 </BootstrapInputGroup>
             </div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="IsFixedSearch" />
+                    <Checkbox @bind-Value="@_isFixedSearch" />
+                </BootstrapInputGroup>
+            </div>
             <div class="col-12 col-sm-6">
                 <BootstrapInputGroup>
                     <BootstrapInputGroupLabel DisplayText="IsClearable" />
@@ -452,7 +458,8 @@
     <p class="code-label">1. 使用 OnQueryAsync 作为数据源</p>
     <div class="row mb-3">
         <div class="col-6">
-            <Select IsVirtualize="true" OnQueryAsync="OnQueryAsync" @bind-Value="VirtualItem1" ShowSearch="_showSearch" IsClearable="_isClearable"></Select>
+            <Select IsVirtualize="true" OnQueryAsync="OnQueryAsync" @bind-Value="VirtualItem1"
+                    ShowSearch="_showSearch" IsFixedSearch="_isFixedSearch" IsClearable="_isClearable"></Select>
         </div>
         <div class="col-6">
             <Display TValue="string" Value="@VirtualItem1?.Text"></Display>
@@ -462,7 +469,8 @@
     <p class="code-label">2. 使用 Items 作为数据源</p>
     <div class="row">
         <div class="col-6">
-            <Select IsVirtualize="true" Items="VirtualItems" @bind-Value="VirtualItem2" ShowSearch="_showSearch" IsClearable="_isClearable"></Select>
+            <Select IsVirtualize="true" Items="VirtualItems" @bind-Value="VirtualItem2"
+                    ShowSearch="_showSearch" IsFixedSearch="_isFixedSearch" IsClearable="_isClearable"></Select>
         </div>
         <div class="col-6">
             <Display TValue="string" Value="@VirtualItem2?.Text"></Display>

src/BootstrapBlazor/BootstrapBlazor.csproj

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

src/BootstrapBlazor/Components/Select/MultiSelect.razor

@@ -1,6 +1,7 @@
 @namespace BootstrapBlazor.Components
+@using Microsoft.AspNetCore.Components.Web.Virtualization
 @typeparam TValue
-@inherits SelectBase<TValue>
+@inherits SimpleSelectBase<TValue>
 @attribute [BootstrapModuleAutoLoader("Select/MultiSelect.razor.js", JSObjectReference = true)]
 
 @if (IsShowLabel)
@@ -48,6 +49,10 @@
             <span class="@AppendClassString"><i class="@DropdownIcon"></i></span>
         }
     </div>
+    @if (GetClearable())
+    {
+        <span class="@ClearClassString" @onclick="OnClearValue"><i class="@ClearableIcon"></i></span>
+    }
     <div class="@DropdownMenuClassString">
         @if (ShowSearch)
         {
@@ -57,7 +62,23 @@
                 <i class="@SearchLoadingIconString"></i>
             </div>
         }
-        @if (Rows.Count == 0)
+        @if (IsVirtualize)
+        {
+            <div class="dropdown-menu-body dropdown-virtual">
+                @if (OnQueryAsync == null)
+                {
+                    <Virtualize ItemSize="RowHeight" OverscanCount="OverscanCount" Items="@GetVirtualItems()" ChildContent="RenderRow">
+                    </Virtualize>
+                }
+                else
+                {
+                    <Virtualize ItemSize="RowHeight" OverscanCount="OverscanCount" ItemsProvider="LoadItems"
+                                Placeholder="RenderPlaceHolderRow" ItemContent="RenderRow" @ref="_virtualizeElement">
+                    </Virtualize>
+                }
+            </div>
+        }
+        else if (Rows.Count == 0)
         {
             <div class="dropdown-item">@NoSearchDataText</div>
         }
@@ -91,28 +112,50 @@
                     }
                     @foreach (var item in itemGroup)
                     {
-                        <DynamicElement OnClick="() => ToggleRow(item.Value)" TriggerClick="@CheckCanTrigger(item)" class="@GetItemClassString(item)">
-                            <div class="multi-select-item">
-                                <div class="form-check">
-                                    <input class="form-check-input" type="checkbox" disabled="@CheckCanSelect(item)" checked="@GetCheckedString(item)" />
-                                </div>
-                                @if (ItemTemplate != null)
-                                {
-                                    @ItemTemplate(item)
-                                }
-                                else if (IsMarkupString)
-                                {
-                                    @((MarkupString)item.Text)
-                                }
-                                else
-                                {
-                                    <span>@item.Text</span>
-                                }
-                            </div>
-                        </DynamicElement>
+                        @RenderRow(item)
+                    }
+
+                    if (!string.IsNullOrEmpty(itemGroup.Key))
+                    {
+                        if (GroupItemTemplate != null)
+                        {
+                            @GroupItemTemplate(itemGroup.Key)
+                        }
+                        else
+                        {
+                            <Divider Text="@itemGroup.Key" />
+                        }
                     }
                 }
             </div>
         }
     </div>
 </div>
+
+@code {
+    RenderFragment<SelectedItem> RenderRow => item =>
+    @<DynamicElement OnClick="() => ToggleRow(item.Value)" TriggerClick="@CheckCanTrigger(item)" class="@GetItemClassString(item)">
+        <div class="multi-select-item">
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" disabled="@CheckCanSelect(item)" checked="@GetCheckedString(item)" />
+            </div>
+            @if (ItemTemplate != null)
+            {
+                @ItemTemplate(item)
+            }
+            else if (IsMarkupString)
+            {
+                @((MarkupString)item.Text)
+            }
+            else
+            {
+                <span>@item.Text</span>
+            }
+        </div>
+    </DynamicElement>;
+
+    RenderFragment<PlaceholderContext> RenderPlaceHolderRow => context =>
+    @<div class="dropdown-item">
+        <div class="is-ph"></div>
+    </div>;
+}