refactor(AutoComplete): redesign for improve performance (#4973)

* chore: bump version 9.2.0-beta01

Co-Authored-By: khyjb1995 <[email protected]>

* chore: bump version 9.1.4

* refactor: 更新 type 为 text

* refactor: 移除拼音处理逻辑

* doc: 增加注释文档

* refactor: 更新配置

* refactor: 重新设计下拉菜单显示逻辑

* refactor: 增加 Desc 标签

* refactor: 重构代码

* refactor: 支持回车按键

* refactor: 重构代码

* test: 更新单元测试

* doc: 更新示例

* refactor: 更改修饰符

* refactor: 更改样式字符串

* refactor: 更改变量名称

* refactor: 移动参数方法到基类中

* refactor: 移动部分参数到组件内

* refactor: 移动 TriggerBlure 到基类

* refactor: 移动 ShowDropdownListOnFocus 到实现类

* refactor: 移除 CurrentItemIndex 逻辑

* refactor: 代码重构

* refactor: 移动点击事件到组件内

* refactor: 移除无用代码

* refactor: 精简代码

* feat: 增加获得滚动行为参数逻辑

* refactor: 完善 blur 逻辑

* refactor: 增加菜单点击事件销毁逻辑

* refactor: 增加上下箭头出发下拉菜单逻辑

* refactor: 精简样式

* doc: 增加 IsPopover 示例

* refactor: 增加全局钩子

* doc: 格式化文档

* refactor: 移动 FilterItems 变量

* refactor: 增加 Esc 逻辑

* refactor: 根据 AutoComplete 重构 AutoFill 组件

* refactor: 移除不使用的方法

* refactor: 重构 AutoFill 组件

* doc: 更新示例文档

* doc: 更新文档说明按键支持 Esc

* refactor: 增加关窗逻辑

* refactor: 开窗增加条件判断

* refactor: 更新 Search 组件

* refactor: 增加搜索按钮支持

* feat: 增加搜索按钮逻辑

* doc: 更新示例

* doc: 更新示例

* refactor: 更改泛型约束

* refactor: 代码统一

* test: 更新单元测试

* test: 增加防抖单元测试

* refactor: 移除不使用的属性

---------

Co-authored-by: khyjb1995 <[email protected]>

Author: ArgoZhang

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -46,7 +46,7 @@
     <PackageReference Include="BootstrapBlazor.Markdown" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.MaterialDesign" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.MaterialDesign.Extensions" Version="9.0.0" />
-    <PackageReference Include="BootstrapBlazor.MeiliSearch" Version="9.1.3" />
+    <PackageReference Include="BootstrapBlazor.MeiliSearch" Version="9.1.4" />
     <PackageReference Include="BootstrapBlazor.Mermaid" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.MindMap" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.MouseFollower" Version="9.0.1" />

src/BootstrapBlazor.Server/Components/Pages/Coms.razor

@@ -4,8 +4,7 @@
 <div class="coms-search">
     <div class="row">
         <div class="col-12">
-            <Search PlaceHolder="@Localizer["Search"]" IsOnInputTrigger="true" IsAutoFocus="true"
-                    Items="@ComponentItems" IsLikeMatch="true" IgnoreCase="true" OnSearch="@OnSearch"></Search>
+            <Search @bind-Value="@SearchText" PlaceHolder="@Localizer["Search"]" IsOnInputTrigger="true" IsAutoFocus="true" OnSearch="@OnSearch"></Search>
         </div>
     </div>
     <div class="coms-search-filter">

src/BootstrapBlazor.Server/Components/Pages/Coms.razor.cs

@@ -6,19 +6,17 @@
 namespace BootstrapBlazor.Server.Components.Pages;
 
 /// <summary>
-/// 
+/// Coms 组件
 /// </summary>
 public sealed partial class Coms
 {
     private List<string> ComponentItems { get; } = [];
 
     private string? SearchText { get; set; }
 
-    private Task OnSearch(string searchText)
+    private Task<IEnumerable<string>> OnSearch(string searchText)
     {
         SearchText = searchText;
-
-        StateHasChanged();
-        return Task.CompletedTask;
+        return Task.FromResult<IEnumerable<string>>(ComponentItems.Where(i => i.Contains(searchText, StringComparison.OrdinalIgnoreCase)));
     }
 }

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

@@ -6,40 +6,35 @@
 <h4>@Localizer["Description"]</h4>
 
 <DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
-    <p>@Localizer["NormalDescription"]</p>
-
+    <section ignore>@Localizer["NormalDescription"]</section>
     <div style="width: 200px;">
         <AutoComplete Items="@StaticItems" IsSelectAllTextOnFocus="true" />
     </div>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="LikeMatch">
-    <p>@Localizer["LikeMatchDescription"]</p>
-
+    <section ignore>@Localizer["LikeMatchDescription"]</section>
     <div style="width: 200px;">
         <AutoComplete Items="@StaticItems" IsLikeMatch="true" IgnoreCase="false" />
     </div>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]" Name="NoDataTip">
-    <p>@((MarkupString)Localizer["NoDataTipDescription"].Value)</p>
-
+    <section ignore>@((MarkupString)Localizer["NoDataTipDescription"].Value)</section>
     <div style="width: 200px;">
         <AutoComplete Items="@StaticItems" NoDataTip="@Localizer["NoDataTip"]" />
     </div>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="ValueChanged">
-    <p>@Localizer["ValueChangedDescription"]</p>
-
+    <section ignore>@Localizer["ValueChangedDescription"]</section>
     <div style="width: 200px;">
         <AutoComplete Items="@Items" ValueChanged="@OnValueChanged" />
     </div>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="ShowLabel">
-    <p>@((MarkupString)Localizer["ShowLabelDescription"].Value)</p>
-
+    <section ignore>@((MarkupString)Localizer["ShowLabelDescription"].Value)</section>
     <Divider Text="@Localizer["Divider1Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
     <ValidateForm Model="@Model">
         <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="true" />
@@ -51,15 +46,17 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["DebounceTitle"]" Introduction="@Localizer["DebounceIntro"]" Name="Debounce">
-    <p>@Localizer["DebounceDescription"]</p>
+    <section ignore>@Localizer["DebounceDescription"]</section>
     <div style="width: 200px;">
         <AutoComplete Items="@Items" ValueChanged="@OnValueChanged" Debounce="500" />
     </div>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["OnSelectedItemChangedTitle"]" Introduction="@Localizer["OnSelectedItemChangedIntro"]" Name="OnSelectedItemChanged">
     <AutoComplete Items="@StaticItems" OnSelectedItemChanged="OnSelectedItemChanged" Debounce="500"></AutoComplete>
-    <ConsoleLogger @ref="Logger" />
+    <section ignore>
+        <ConsoleLogger @ref="Logger" />
+    </section>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["ItemTemplateTitle"]" Introduction="@Localizer["ItemTemplateIntro"]" Name="ItemTemplate">
@@ -98,4 +95,10 @@
     <ConsoleLogger @ref="GroupLogger" />
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["PopoverTitle"]"
+           Introduction="@Localizer["PopoverIntro"]"
+           Name="Popover">
+    <AutoComplete Items="@StaticItems" IsPopover="true"></AutoComplete>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />

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

@@ -6,7 +6,7 @@
 namespace BootstrapBlazor.Server.Components.Samples;
 
 /// <summary>
-///
+/// AutoComplete 组件示例
 /// </summary>
 public sealed partial class AutoCompletes
 {

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

@@ -6,11 +6,10 @@
 <h4>@Localizer["Description"]</h4>
 
 <DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
-    <div class="mb-3">
+    <section ignore>
         @((MarkupString)@Localizer["NormalDesc"].Value)
-    </div>
-    <AutoFill TValue="Foo" Value="Model" Items="Items" IsLikeMatch="true" OnSelectedItemChanged="OnSelectedItemChanged"
-              OnGetDisplayText="OnGetDisplayText" class="mb-3" IsSelectAllTextOnFocus="true">
+    </section>
+    <AutoFill @bind-Value="Model1" Items="Items1" IsLikeMatch="true" OnGetDisplayText="OnGetDisplayText" class="mb-3" IsSelectAllTextOnFocus="true">
         <Template>
             <div class="d-flex">
                 <div>
@@ -23,14 +22,16 @@
             </div>
         </Template>
     </AutoFill>
-    <img src="@WebsiteOption.CurrentValue.GetAvatarUrl(Model.Id)" class="shadow" style="width: 140px; margin-bottom: 1rem; border-radius: 6px;" />
-    <EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />
+    <section ignore>
+        <img src="@WebsiteOption.CurrentValue.GetAvatarUrl(Model1.Id)" class="shadow" style="width: 140px; margin-bottom: 1rem; border-radius: 6px;" />
+        <EditorForm Model="@Model1" RowType="RowType.Inline" ItemsPerRow="2" />
+    </section>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["CustomFilterTitle"]" Introduction="@Localizer["CustomFilterIntro"]" Name="CustomFilter">
-    <div class="mb-3">@((MarkupString)Localizer["CustomFilterDesc"].Value)</div>
-    <AutoFill TValue="Foo" Value="Model" Items="Items" OnCustomFilter="OnCustomFilter"
-              OnSelectedItemChanged="OnSelectedItemChanged" OnGetDisplayText="OnGetDisplayText" class="mb-3">
+    <section ignore>@((MarkupString)Localizer["CustomFilterDesc"].Value)</section>
+    <AutoFill @bind-Value="Model2" Items="Items2" OnCustomFilter="OnCustomFilter"
+              OnGetDisplayText="OnGetDisplayText" class="mb-3">
         <Template>
             <div class="d-flex">
                 <div>
@@ -43,15 +44,16 @@
             </div>
         </Template>
     </AutoFill>
-    <EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />
+    <section ignore>
+        <EditorForm Model="@Model2" RowType="RowType.Inline" ItemsPerRow="2" />
+    </section>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["ShowDropdownListOnFocusTitle"]" Introduction="@Localizer["ShowDropdownListOnFocusIntro"]" Name="ShowDropdownListOnFocus">
-    <div class="mb-3">
+    <section ignore>
         @((MarkupString)@Localizer["ShowDropdownListOnFocusDesc"].Value)
-    </div>
-    <AutoFill TValue="Foo" Value="Model" Items="Items" ShowDropdownListOnFocus="false"
-              OnGetDisplayText="OnGetDisplayText" class="mb-3">
+    </section>
+    <AutoFill @bind-Value="Model3" Items="Items3" ShowDropdownListOnFocus="false" OnGetDisplayText="OnGetDisplayText" class="mb-3">
         <Template>
             <div class="d-flex">
                 <div>
@@ -64,7 +66,9 @@
             </div>
         </Template>
     </AutoFill>
-    <EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />
+    <section ignore>
+        <EditorForm Model="@Model3" RowType="RowType.Inline" ItemsPerRow="2" />
+    </section>
 </DemoBlock>
 
 <AttributeTable Items="@GetAttributes()" />

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

@@ -11,19 +11,23 @@ namespace BootstrapBlazor.Server.Components.Samples;
 partial class AutoFills
 {
     [NotNull]
-    private Foo Model { get; set; } = new();
+    private Foo Model1 { get; set; } = new();
 
-    private Task OnSelectedItemChanged(Foo foo)
-    {
-        Model = Utility.Clone(foo);
-        StateHasChanged();
-        return Task.CompletedTask;
-    }
+    [NotNull]
+    private Foo Model2 { get; set; } = new();
+    [NotNull]
+    private Foo Model3 { get; set; } = new();
 
     private static string OnGetDisplayText(Foo foo) => foo.Name ?? "";
 
     [NotNull]
-    private IEnumerable<Foo>? Items { get; set; }
+    private IEnumerable<Foo>? Items1 { get; set; }
+
+    [NotNull]
+    private IEnumerable<Foo>? Items2 { get; set; }
+
+    [NotNull]
+    private IEnumerable<Foo>? Items3 { get; set; }
 
     [Inject]
     [NotNull]
@@ -34,13 +38,19 @@ protected override void OnInitialized()
     {
         base.OnInitialized();
 
-        Items = Foo.GenerateFoo(LocalizerFoo);
-        Model = Items.First();
+        Items1 = Foo.GenerateFoo(LocalizerFoo);
+        Model1 = Items1.First();
+
+        Items2 = Foo.GenerateFoo(LocalizerFoo);
+        Model2 = Items2.First();
+
+        Items3 = Foo.GenerateFoo(LocalizerFoo);
+        Model3 = Items3.First();
     }
 
     private Task<IEnumerable<Foo>> OnCustomFilter(string searchText)
     {
-        var items = string.IsNullOrEmpty(searchText) ? Items : Items.Where(i => i.Count > 50 && i.Name!.Contains(searchText));
+        var items = string.IsNullOrEmpty(searchText) ? Items2 : Items2.Where(i => i.Count > 50 && i.Name!.Contains(searchText));
         return Task.FromResult(items);
     }
 
@@ -122,14 +132,14 @@ private AttributeItem[] GetAttributes() =>
             ValueList = " — ",
             DefaultValue = " — "
         },
-        new()
-        {
-            Name = nameof(AutoFill<Foo>.ShowDropdownListOnFocus),
-            Description = Localizer["Att10"],
-            Type = "bool",
-            ValueList = "true/false",
-            DefaultValue = "true"
-        },
+        //new()
+        //{
+        //    Name = nameof(AutoFill<Foo>.ShowDropdownListOnFocus),
+        //    Description = Localizer["Att10"],
+        //    Type = "bool",
+        //    ValueList = "true/false",
+        //    DefaultValue = "true"
+        //},
         new()
         {
             Name = "Template",

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

@@ -8,12 +8,9 @@
 <DemoBlock Title="@Localizer["SearchesNormalTitle"]"
            Introduction="@Localizer["SearchesNormalIntro"]"
            Name="Normal">
-    <p>@((MarkupString)Localizer["SearchesNormalDescription"].Value)</p>
-    <Search IgnoreCase="true"
-            IsLikeMatch="true"
-            IsAutoFocus="true"
+    <section ignore>@((MarkupString)Localizer["SearchesNormalDescription"].Value)</section>
+    <Search IsAutoFocus="true"
             PlaceHolder="@Localizer["SearchesPlaceHolder"]"
-            Items="@Items"
             OnSearch="@OnSearch"
             IsSelectAllTextOnFocus="true" />
     <ConsoleLogger @ref="Logger" />
@@ -22,23 +19,17 @@
 <DemoBlock Title="@Localizer["SearchesClearValueTitle"]"
            Introduction="@Localizer["SearchesClearValueIntro"]"
            Name="ClearValue">
-    <Search IgnoreCase="true"
-            IsLikeMatch="true"
-            IsAutoClearAfterSearch="true"
+    <Search IsAutoClearAfterSearch="true"
             PlaceHolder="@Localizer["SearchesPlaceHolder"]"
-            Items="@Items"
             OnSearch="@OnClearSearch" />
     <ConsoleLogger @ref="ClearLogger" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["SearchesDisplayButtonTitle"]"
            Introduction="@Localizer["SearchesDisplayButtonIntro"]"
            Name="DisplayButton">
-    <Search IgnoreCase="true"
-            IsLikeMatch="true"
-            PlaceHolder="@Localizer["SearchesPlaceHolder"]"
+    <Search PlaceHolder="@Localizer["SearchesPlaceHolder"]"
             ShowClearButton="true"
-            Items="@Items"
             OnSearch="@OnDisplaySearch"
             OnClear="@OnClear"></Search>
     <ConsoleLogger @ref="DisplayLogger" />
@@ -47,11 +38,8 @@
 <DemoBlock Title="@Localizer["SearchesKeyboardsTitle"]"
            Introduction="@Localizer["SearchesKeyboardsIntro"]"
            Name="keyboards">
-    <Search IgnoreCase="true"
-            IsLikeMatch="true"
-            PlaceHolder="@Localizer["SearchesPlaceHolder"]"
-            IsOnInputTrigger="true"
-            Items="@Items"
+    <Search PlaceHolder="@Localizer["SearchesPlaceHolder"]"
+            IsOnInputTrigger="false"
             OnSearch="@OnKeyboardSearch" />
     <ConsoleLogger @ref="KeyboardLogger" />
 </DemoBlock>
@@ -60,7 +48,7 @@
            Introduction="@Localizer["SearchesValidateFormIntro"]"
            Name="ValidateForm">
     <ValidateForm Model="@Model">
-        <Search Items="StaticItems" IsOnInputTrigger="true" @bind-Value="Model.Name" />
+        <Search IsOnInputTrigger="true" @bind-Value="Model.Name" />
     </ValidateForm>
 </DemoBlock>