feat(Table): add AutoSearchOnInput parameter (#6306)

* feat: add AutoSearchOnInput parameter

* feat: 更新代码

* test: 更新单元测试

* chore: bump version 9.8.0-beta04

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

---------

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

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.8.0-beta03</Version>
+    <Version>9.8.0-beta04</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Table/Table.razor

@@ -169,12 +169,18 @@
                                 @if (ShowSearchTextTooltip)
                                 {
                                     <Tooltip Placement="Placement.Top" Title="@SearchTooltip" Sanitize="false" IsHtml="true">
-                                        <BootstrapInput class="table-toolbar-search" @onkeyup="OnSearchKeyUp" placeholder="@SearchPlaceholderText" @bind-Value="@SearchText" ShowLabel="false" />
+                                        <BootstrapInput class="table-toolbar-search" placeholder="@SearchPlaceholderText"
+                                                        @onkeyup="OnSearchKeyUp" Value="@SearchText" OnValueChanged="OnSearchTextValueChanged"
+                                                        ShowLabel="false" UseInputEvent="AutoSearchOnInput">
+                                        </BootstrapInput>
                                     </Tooltip>
                                 }
                                 else
                                 {
-                                    <BootstrapInput class="table-toolbar-search" placeholder="@SearchPlaceholderText" @bind-Value="@SearchText" ShowLabel="false" />
+                                    <BootstrapInput class="table-toolbar-search" placeholder="@SearchPlaceholderText"
+                                                    Value="@SearchText" OnValueChanged="OnSearchTextValueChanged"
+                                                    ShowLabel="false" UseInputEvent="AutoSearchOnInput">
+                                    </BootstrapInput>
                                 }
                             }
                             @if (ShowSearchButton)
@@ -984,13 +990,17 @@
                     @if (ShowSearchTextTooltip)
                     {
                         <Tooltip Placement="Placement.Top" Title="@SearchTooltip" Sanitize="false" IsHtml="true">
-                            <BootstrapInput class="table-toolbar-search" placeholder="@SearchPlaceholderText" @onkeyup="OnSearchKeyUp" @bind-Value="@SearchText" ShowLabel="false" SkipValidate="true">
+                            <BootstrapInput class="table-toolbar-search" placeholder="@SearchPlaceholderText"
+                                            @onkeyup="OnSearchKeyUp" Value="@SearchText" OnValueChanged="OnSearchTextValueChanged"
+                                            ShowLabel="false" SkipValidate="true" UseInputEvent="AutoSearchOnInput">
                             </BootstrapInput>
                         </Tooltip>
                     }
                     else
                     {
-                        <BootstrapInput class="table-toolbar-search" placeholder="@SearchPlaceholderText" @onkeyup="OnSearchKeyUp" @bind-Value="@SearchText" SkipValidate="true">
+                        <BootstrapInput class="table-toolbar-search" placeholder="@SearchPlaceholderText"
+                                        @onkeyup="OnSearchKeyUp" Value="@SearchText" OnValueChanged="OnSearchTextValueChanged"
+                                        SkipValidate="true" UseInputEvent="AutoSearchOnInput">
                         </BootstrapInput>
                     }
                 }

src/BootstrapBlazor/Components/Table/Table.razor.Search.cs

@@ -279,6 +279,13 @@ protected List<IFilterAction> GetAdvanceSearches()
     /// <returns></returns>
     protected List<IFilterAction> GetSearches() => Columns.Where(col => col.GetSearchable()).ToSearches(SearchText);
 
+    private async Task OnSearchTextValueChanged(string? value)
+    {
+        SearchText = value;
+
+        await SearchClick();
+    }
+
     private async Task OnSearchKeyUp(KeyboardEventArgs args)
     {
         if (args.Key == "Enter")

src/BootstrapBlazor/Components/Table/Table.razor.cs

@@ -16,6 +16,12 @@ namespace BootstrapBlazor.Components;
 [CascadingTypeParameter(nameof(TItem))]
 public partial class Table<TItem> : ITable, IModelEqualityComparer<TItem> where TItem : class
 {
+    /// <summary>
+    /// Gets or sets a value indicating whether automatic search functionality is enabled. Default value is false.
+    /// </summary>
+    [Parameter]
+    public bool AutoSearchOnInput { get; set; }
+
     /// <summary>
     /// 获得/设置 不支持过滤类型提示信息 默认 null 读取资源文件内容
     /// </summary>

test/UnitTest/Components/TableTest.cs

@@ -377,7 +377,7 @@ public async Task ShowSearch_Ok()
     }
 
     [Fact]
-    public void OnSearchKeyUp_Ok()
+    public async Task OnSearchKeyUp_Ok()
     {
         var resetSearch = false;
         var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
@@ -389,6 +389,7 @@ public void OnSearchKeyUp_Ok()
                 pb.Add(a => a.ShowToolbar, true);
                 pb.Add(a => a.ShowSearch, true);
                 pb.Add(a => a.ShowSearchText, true);
+                pb.Add(a => a.AutoSearchOnInput, false);
                 pb.Add(a => a.ShowSearchTextTooltip, false);
                 pb.Add(a => a.SearchMode, SearchMode.Top);
                 pb.Add(a => a.Items, Foo.GenerateFoo(localizer, 2));
@@ -407,8 +408,9 @@ public void OnSearchKeyUp_Ok()
             });
         });
         var searchBox = cut.Find(".table-toolbar-search");
-        cut.InvokeAsync(() => searchBox.KeyUp(new KeyboardEventArgs() { Key = "Enter" }));
-        cut.InvokeAsync(() => searchBox.KeyUp(new KeyboardEventArgs() { Key = "Escape" }));
+        await cut.InvokeAsync(() => searchBox.KeyUp(new KeyboardEventArgs() { Key = "Enter" }));
+        await cut.InvokeAsync(() => searchBox.KeyUp(new KeyboardEventArgs() { Key = "Escape" }));
+        await cut.InvokeAsync(() => searchBox.Change("0"));
         Assert.True(resetSearch);
     }