!3668 doc(#I67BCV): update AutoFill Demos

* Merge branch 'main' into I67BCV-AutoFill
* doc: 更新 AutoFill 示例精简例子代码
* chore: 更新资源文件
* update AutoFill Demos
* doc: 更新资源文件移除 Description 键值
* doc: 格式化文档
* Merge branch 'main' into I67BCV-AutoFill
* Merge remote-tracking branch 'origin/I67BCV-AutoFill' into I67BCV-AutoFill
* Merge remote-tracking branch 'origin/I67BCV-AutoFill' into I67BCV-AutoFill
* Merge remote-tracking branch 'origin/I67BCV-AutoFill' into I67BCV-AutoFill
* update AutoFill demos
* update AutoFill demos

src/BootstrapBlazor.Shared/Demos/AutoFill/AutoFillCustomFilter.razor

@@ -0,0 +1,53 @@
+<AutoFill TValue="Foo" Value="Model" Items="Items" OnCustomFilter="OnCustomFilter"
+          OnSelectedItemChanged="OnSelectedItemChanged" OnGetDisplayText="OnGetDisplayText" class="mb-3">
+    <Template>
+        <div class="d-flex">
+            <div>
+                <img src="@Foo.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>
+    </Template>
+</AutoFill>
+<EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />
+
+@code {
+    [NotNull]
+    private Foo Model { get; set; } = new();
+
+    [NotNull]
+    private IEnumerable<Foo>? Items { get; set; }
+
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
+
+    /// <summary>
+    /// OnInitialized method
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        Items = Foo.GenerateFoo(LocalizerFoo);
+        Model = Items.First();
+    }
+
+    private Task<IEnumerable<Foo>> OnCustomFilter(string searchText)
+    {
+        var items = string.IsNullOrEmpty(searchText) ? Items : Items.Where(i => i.Count > 50 && i.Name!.Contains(searchText));
+        return Task.FromResult(items);
+    }
+
+    private Task OnSelectedItemChanged(Foo foo)
+    {
+        Model = Utility.Clone(foo);
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+
+    private static string OnGetDisplayText(Foo foo) => foo.Name ?? "";
+}

src/BootstrapBlazor.Shared/Demos/AutoFill/AutoFillNormal.razor

@@ -0,0 +1,45 @@
+<AutoFill TValue="Foo" Value="Model" Items="Items" IsLikeMatch="true" OnSelectedItemChanged="OnSelectedItemChanged"
+          OnGetDisplayText="OnGetDisplayText" class="mb-3" IsSelectAllTextOnFocus="true">
+    <Template>
+        <div class="d-flex">
+            <div>
+                <img src="@Foo.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>
+    </Template>
+</AutoFill>
+<img src="@Foo.GetAvatarUrl(Model.Id)" class="shadow" style="width: 140px; margin-bottom: 1rem; border-radius: 6px;" />
+<EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />
+
+@code {
+    [NotNull]
+    private Foo Model { get; set; } = new();
+
+    private Task OnSelectedItemChanged(Foo foo)
+    {
+        Model = Utility.Clone(foo);
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+
+    private static string OnGetDisplayText(Foo foo) => foo.Name ?? "";
+
+    [NotNull]
+    private IEnumerable<Foo>? Items { get; set; }
+
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        Items = Foo.GenerateFoo(LocalizerFoo);
+        Model = Items.First();
+    }
+}

src/BootstrapBlazor.Shared/Demos/AutoFill/AutoFillShowDropdownListOnFocus.razor

@@ -0,0 +1,37 @@
+<AutoFill TValue="Foo" Value="Model" Items="Items" ShowDropdownListOnFocus="false"
+          OnGetDisplayText="OnGetDisplayText" class="mb-3">
+    <Template>
+        <div class="d-flex">
+            <div>
+                <img src="@Foo.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>
+    </Template>
+</AutoFill>
+<EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />
+
+@code {
+    [NotNull]
+    private Foo Model { get; set; } = new();
+
+    private static string OnGetDisplayText(Foo foo) => foo.Name ?? "";
+
+    [NotNull]
+    private IEnumerable<Foo>? Items { get; set; }
+
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        Items = Foo.GenerateFoo(LocalizerFoo);
+        Model = Items.First();
+    }
+}

src/BootstrapBlazor.Shared/Locales/en.json

@@ -2002,26 +2002,17 @@
     "ButtonText": "SetTitle"
   },
   "BootstrapBlazor.Shared.Samples.AutoFills": {
-    "H1": "AutoFill components",
-    "P1": "Auto-fill forms when selected via IntelliSense prompt option",
-    "P2": "Basic usage",
-    "P3": "fill the form",
-    "P4": "input",
-    "P5": "Name smart prompt, automatically fill in the form below after selecting the prompt item Currently supports keyboard",
-    "P6": "custom filter",
-    "P7": "Filter data by setting custom filter condition callback delegate <code>OnCustomFilter</code>",
-    "P8": "input",
-    "P9": "Name intelligent prompt, call back the delegate by setting custom filter conditions",
-    "P10": "Filter data, the current filter condition is",
-    "P11": "contains the input string",
-    "P12": "and",
-    "P13": "value greater than",
-    "P14": "Turn off auto-expand dropdown",
-    "P15": "By setting <code>ShowDropdownListOnFocus=&quot;false&quot;</code>",
-    "P16": "parameter",
-    "P17": "Default is",
-    "P18": "After the component gets the focus, it will automatically expand the candidate drop-down box, set to",
-    "P19": "turn off this feature",
+    "Title": "AutoFill components",
+    "Description": "Auto-fill forms when selected via IntelliSense prompt option",
+    "NormalTitle": "Basic usage",
+    "NormalIntro": "fill the form",
+    "NormalDesc": "input <code>Name</code> Name smart prompt, automatically fill in the form below after selecting the prompt item Currently supports keyboard <kbd>Enter</kbd> <kbd>Spance</kbd> <kbd><i class=\"fa-solid fa-arrow-up\"></i></kbd> <kbd><i class=\"fa-solid fa-arrow-down\"></i></kbd>",
+    "CustomFilterTitle": "custom filter",
+    "CustomFilterIntro": "Filter data by setting custom filter condition callback delegate <code>OnCustomFilter</code>",
+    "CustomFilterDesc": "Enter the <code>name</code> intelligent prompt, and delegate <code>OnCustomFilter</code> to filter data by setting a user-defined filter condition callback. The current filter condition is that <code>Name</code> contains the input string <code>Count</code> and the value is greater than <b>50</b>",
+    "ShowDropdownListOnFocusTitle": "Turn off auto-expand dropdown",
+    "ShowDropdownListOnFocusIntro": "By setting <code>ShowDropdownListOnFocus=&quot;false&quot;</code>",
+    "ShowDropdownListOnFocusDesc": "parameter <code>ShowDropdownListOnFocus</code> the default value is <code>true</code>. After the component gets the focus, it will automatically expand the candidate drop-down box, set to <code>false</code> turn off this feature",
     "Att1": "The number to display when matching data",
     "Att2": "Display a message when there is no matching data",
     "Def2": "No matching data",

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -2003,26 +2003,17 @@
     "ButtonText": "更改标题"
   },
   "BootstrapBlazor.Shared.Samples.AutoFills": {
-    "H1": "AutoFill 自动填充组件",
-    "P1": "通过智能感应提示选项，选中后自动填充表单",
-    "P2": "基本用法",
-    "P3": "填充表单",
-    "P4": "录入",
-    "P5": "姓名智能提示，选择提示项后自动填充下方表单 目前支持键盘",
-    "P6": "自定义过滤条件",
-    "P7": "通过设置自定义过滤条件回调委托 <code>OnCustomFilter</code> 过滤数据",
-    "P8": "录入",
-    "P9": "姓名智能提示，通过设置自定义过滤条件回调委托",
-    "P10": "过滤数据，当前过滤条件为",
-    "P11": "包含输入字符串",
-    "P12": "并且",
-    "P13": "值大于",
-    "P14": "关闭自动展开下拉框",
-    "P15": "通过设置 <code>ShowDropdownListOnFocus=&quot;false&quot;</code>",
-    "P16": "参数",
-    "P17": "默认值为",
-    "P18": "组件获得焦点后会自动展开候选项下拉框，设置为",
-    "P19": "后关闭这个特性",
+    "Title": "AutoFill 自动填充组件",
+    "Description": "通过智能感应提示选项，选中后自动填充表单",
+    "NormalTitle": "基本用法",
+    "NormalIntro": "填充表单",
+    "NormalDesc": "录入 <code>Name</code> 姓名智能提示，选择提示项后自动填充下方表单 目前支持键盘 <kbd>Enter</kbd> <kbd>Spance</kbd> <kbd><i class=\"fa-solid fa-arrow-up\"></i></kbd> <kbd><i class=\"fa-solid fa-arrow-down\"></i></kbd>",
+    "CustomFilterTitle": "自定义过滤条件",
+    "CustomFilterIntro": "通过设置自定义过滤条件回调委托 <code>OnCustomFilter</code> 过滤数据",
+    "CustomFilterDesc": "录入 <code>Name</code> 姓名智能提示，通过设置自定义过滤条件回调委托 <code>OnCustomFilter</code> 过滤数据，当前过滤条件为 <code>Name</code> 包含输入字符串 <code>Count</code> 并且 值大于 50",
+    "ShowDropdownListOnFocusTitle": "关闭自动展开下拉框",
+    "ShowDropdownListOnFocusIntro": "通过设置 <code>ShowDropdownListOnFocus=&quot;false&quot;</code>",
+    "ShowDropdownListOnFocusDesc": "参数 <code>ShowDropdownListOnFocus</code> 默认值为 <code>true</code> 组件获得焦点后会自动展开候选项下拉框，设置为 <code>false</code> 后关闭这个特性",
     "Att1": "匹配数据时显示的数量",
     "Att2": "无匹配数据时显示提示信息",
     "Def2": "无匹配数据",

src/BootstrapBlazor.Shared/Samples/AutoFills.razor

@@ -1,62 +1,26 @@
 @page "/autofills"
 @inject IStringLocalizer<AutoFills> Localizer
 
-<h3>@Localizer["H1"]</h3>
-<h4>@Localizer["P1"]</h4>
+<h3>@Localizer["Title"]</h3>
+<h4>@Localizer["Description"]</h4>
 
-<DemoBlock Title="@Localizer["P2"]" Introduction="@Localizer["P3"]" Name="Normal">
-    <div class="mb-3">@Localizer["P4"] <code>Name</code> @Localizer["P5"] <kbd>Enter</kbd> <kbd>Spance</kbd> <kbd><i class="fa-solid fa-arrow-up"></i></kbd> <kbd><i class="fa-solid fa-arrow-down"></i></kbd></div>
-    <AutoFill TValue="Foo" Value="Model" Items="Items" IsLikeMatch="true" OnSelectedItemChanged="OnSelectedItemChanged" OnGetDisplayText="OnGetDisplayText" class="mb-3" IsSelectAllTextOnFocus="true">
-        <Template>
-            <div class="d-flex">
-                <div>
-                    <img src="@Foo.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>
-        </Template>
-    </AutoFill>
-    <img src="@Foo.GetAvatarUrl(Model.Id)" class="shadow" style="width: 140px; margin-bottom: 1rem; border-radius: 6px;" />
-    <EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />
+<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]"
+           Name="Normal" Demo="AutoFill.AutoFillNormal">
+    <div class="mb-3">
+        @((MarkupString)@Localizer["NormalDesc"].Value)
+    </div>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["P6"]" Introduction="@Localizer["P7"]" Name="CustomFilter">
-    <div class="mb-3">@Localizer["P8"] <code>Name</code> @Localizer["P9"] <code>OnCustomFilter</code> @Localizer["P10"] <code>Name</code> @Localizer["P11"] <b>@Localizer["P12"]</b> <code>Count</code> @Localizer["P13"] 50</div>
-    <AutoFill TValue="Foo" Value="Model" Items="Items" OnCustomFilter="OnCustomFilter" OnSelectedItemChanged="OnSelectedItemChanged" OnGetDisplayText="OnGetDisplayText" class="mb-3">
-        <Template>
-            <div class="d-flex">
-                <div>
-                    <img src="@Foo.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>
-        </Template>
-    </AutoFill>
-    <EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />
+<DemoBlock Title="@Localizer["CustomFilterTitle"]" Introduction="@Localizer["CustomFilterIntro"]"
+           Name="CustomFilter" Demo="AutoFill.AutoFillCustomFilter">
+    <div class="mb-3">@((MarkupString)Localizer["CustomFilterDesc"].Value)</div>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["P14"]" Introduction="@Localizer["P15"]" Name="ShowDropdownListOnFocus">
-    <div class="mb-3">@Localizer["P16"] <code>ShowDropdownListOnFocus</code> @Localizer["P17"] <code>true</code> @Localizer["P18"] <code>false</code> @Localizer["P19"]</div>
-    <AutoFill TValue="Foo" Value="Model" Items="Items" ShowDropdownListOnFocus="false" OnGetDisplayText="OnGetDisplayText" class="mb-3">
-        <Template>
-            <div class="d-flex">
-                <div>
-                    <img src="@Foo.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>
-        </Template>
-    </AutoFill>
-    <EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />
+<DemoBlock Title="@Localizer["ShowDropdownListOnFocusTitle"]" Introduction="@Localizer["ShowDropdownListOnFocusIntro"]"
+           Name="ShowDropdownListOnFocus" Demo="AutoFill.AutoFillShowDropdownListOnFocus">
+    <div class="mb-3">
+        @((MarkupString)@Localizer["ShowDropdownListOnFocusDesc"].Value)
+    </div>
 </DemoBlock>
 
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Samples/AutoFills.razor.cs

@@ -5,46 +5,10 @@
 namespace BootstrapBlazor.Shared.Samples;
 
 /// <summary>
-/// 
+///
 /// </summary>
 partial class AutoFills
 {
-    [NotNull]
-    private Foo Model { get; set; } = new();
-
-    [NotNull]
-    private IEnumerable<Foo>? Items { get; set; }
-
-    [Inject]
-    [NotNull]
-    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
-
-    /// <summary>
-    /// OnInitialized method
-    /// </summary>
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-
-        Items = Foo.GenerateFoo(LocalizerFoo);
-        Model = Items.First();
-    }
-
-    private Task OnSelectedItemChanged(Foo foo)
-    {
-        Model = Utility.Clone(foo);
-        StateHasChanged();
-        return Task.CompletedTask;
-    }
-
-    private static string OnGetDisplayText(Foo foo) => foo.Name ?? "";
-
-    private Task<IEnumerable<Foo>> OnCustomFilter(string searchText)
-    {
-        var items = string.IsNullOrEmpty(searchText) ? Items : Items.Where(i => i.Count > 50 && i.Name!.Contains(searchText));
-        return Task.FromResult(items);
-    }
-
     /// <summary>
     /// Get property method
     /// </summary>