Skip to content

Commit 9e6b9ae

Browse files
ArgoZhangA5196060densen2014
authored
feat(Search): add IsTriggerSearchByInput parameter (#5003)
* feat: 增加点击事件 * doc: 更新文档 * refactor: 移动 ShowNoDataTip 到实现类 * feat: 增加无数据提示词 * refactor: 更新文档 * feat: 增加显示下拉框细分逻辑 * feat: 增加显示输入提示词逻辑 * doc: 代码规范化 * refactor: 统一 api 接口定义 * refactor: 调整属性名称 * doc: 微调功能按钮 z-index 值 * refactor: 更新参数名称 * chore: bump version 9.2.1-beta01 Co-Authored-By: Zeus <[email protected]> Co-Authored-By: Alex chow <[email protected]> --------- Co-authored-by: Zeus <[email protected]> Co-authored-by: Alex chow <[email protected]>
1 parent 17d5dba commit 9e6b9ae

File tree

17 files changed

+152
-113
lines changed

17 files changed

+152
-113
lines changed

‎src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
box-shadow: var(--bb-layout-button-shadow);
44
transition: opacity .3s linear;
55
position: fixed;
6-
z-index: 45;
6+
z-index: 1001;
77
}
88

99
::deep .btn-fade:hover {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="coms-search">
55
<div class="row">
66
<div class="col-12">
7-
<Search @bind-Value="@SearchText" PlaceHolder="@Localizer["Search"]" IsOnInputTrigger="true" IsAutoFocus="true" OnSearch="@OnSearch"></Search>
7+
<Search @bind-Value="@SearchText" PlaceHolder="@Localizer["Search"]" IsTriggerSearchByInput="true" IsAutoFocus="true" OnSearch="@OnSearch"></Search>
88
</div>
99
</div>
1010
<div class="coms-search-filter">

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

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@page "/search"
22
@inject IStringLocalizer<Searches> Localizer
3+
@inject IStringLocalizer<Foo> LocalizerFoo
4+
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
35

46
<h3>@Localizer["SearchesTitle"]</h3>
57

@@ -39,10 +41,21 @@
3941
Introduction="@Localizer["SearchesItemTemplateIntro"]"
4042
Name="ItemTemplate">
4143
<Search PlaceHolder="@Localizer["SearchesPlaceHolder"]"
44+
OnGetDisplayText="OnGetDisplayText"
4245
OnSearch="@OnSearchFoo">
4346
<ItemTemplate>
44-
<div>@context.Name</div>
45-
<div>@context.Address</div>
47+
<div class="search-result">
48+
<div class="search-result-avatar">
49+
<img src="@WebsiteOption.CurrentValue.GetAvatarUrl(context.Id)" alt="avatar" />
50+
</div>
51+
<div class="search-result-main">
52+
<div class="search-result-name">@context.Name</div>
53+
<div class="search-result-address">@context.Address</div>
54+
</div>
55+
<div class="search-result-circle">
56+
<Circle Value="@context.Count" Color="Color.Info" StrokeWidth="4" Width="60" />
57+
</div>
58+
</div>
4659
</ItemTemplate>
4760
</Search>
4861
</DemoBlock>
@@ -51,7 +64,7 @@
5164
Introduction="@Localizer["SearchesKeyboardsIntro"]"
5265
Name="keyboards">
5366
<Search PlaceHolder="@Localizer["SearchesPlaceHolder"]"
54-
IsOnInputTrigger="false"
67+
IsTriggerSearchByInput="false"
5568
OnSearch="@OnKeyboardSearch" />
5669
<ConsoleLogger @ref="KeyboardLogger" />
5770
</DemoBlock>
@@ -60,7 +73,7 @@
6073
Introduction="@Localizer["SearchesValidateFormIntro"]"
6174
Name="ValidateForm">
6275
<ValidateForm Model="@Model">
63-
<Search IsOnInputTrigger="true" @bind-Value="Model.Name" />
76+
<Search @bind-Value="Model.Name" />
6477
</ValidateForm>
6578
</DemoBlock>
6679

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

Lines changed: 14 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,21 @@ private Task<IEnumerable<string>> OnKeyboardSearch(string searchText)
5252
return Task.FromResult<IEnumerable<string>>([$"{searchText}1", $"{searchText}12", $"{searchText}123"]);
5353
}
5454

55-
private Foo Model { get; set; } = new Foo() { Name = "" };
55+
private Foo Model { get; } = new() { Name = "" };
5656

57-
private static async Task<IEnumerable<Foo>> OnSearchFoo(string searchText)
57+
private string? OnGetDisplayText(Foo foo) => foo.Name;
58+
59+
private async Task<IEnumerable<Foo>> OnSearchFoo(string searchText)
5860
{
61+
// 模拟异步延时
5962
await Task.Delay(100);
60-
return Enumerable.Range(1, 10).Select(i => new Foo() { Name = $"{searchText}-{i}", Address = $"Address - 10{i}" }).ToList();
63+
return Enumerable.Range(1, 10).Select(i => new Foo()
64+
{
65+
Id = i,
66+
Name = LocalizerFoo["Foo.Name", $"{i:d4}"],
67+
Address = LocalizerFoo["Foo.Address", $"{Random.Shared.Next(1000, 2000)}"],
68+
Count = Random.Shared.Next(1, 100)
69+
}).ToList();
6170
}
6271

6372
/// <summary>
@@ -66,20 +75,6 @@ private static async Task<IEnumerable<Foo>> OnSearchFoo(string searchText)
6675
/// <returns></returns>
6776
private AttributeItem[] GetAttributes() =>
6877
[
69-
new() {
70-
Name = "ChildContent",
71-
Description = Localizer["SearchesChildContent"],
72-
Type = "RenderFragment",
73-
ValueList = " — ",
74-
DefaultValue = " — "
75-
},
76-
new() {
77-
Name = "Items",
78-
Description = Localizer["SearchesItems"],
79-
Type = "IEnumerable<string>",
80-
ValueList = " — ",
81-
DefaultValue = " — "
82-
},
8378
new() {
8479
Name = "NoDataTip",
8580
Description = Localizer["SearchesNoDataTip"],
@@ -123,13 +118,6 @@ private AttributeItem[] GetAttributes() =>
123118
ValueList = " — ",
124119
DefaultValue = "Primary"
125120
},
126-
new() {
127-
Name = "IsLikeMatch",
128-
Description = Localizer["SearchesIsLikeMatch"],
129-
Type = "bool",
130-
ValueList = "true|false",
131-
DefaultValue = "false"
132-
},
133121
new() {
134122
Name = "IsAutoFocus",
135123
Description = Localizer["SearchesIsAutoFocus"],
@@ -145,21 +133,13 @@ private AttributeItem[] GetAttributes() =>
145133
DefaultValue = "false"
146134
},
147135
new() {
148-
Name = "IsOnInputTrigger",
149-
Description = Localizer["SearchesIsOnInputTrigger"],
136+
Name = "IsTriggerSearchByInput",
137+
Description = Localizer["SearchesIsTriggerSearchByInput"],
150138
Type = "bool",
151139
ValueList = "true|false",
152140
DefaultValue = "false"
153141
},
154142
new()
155-
{
156-
Name = "IgnoreCase",
157-
Description = Localizer["SearchesIgnoreCase"],
158-
Type = "bool",
159-
ValueList = "true|false",
160-
DefaultValue = "true"
161-
},
162-
new()
163143
{
164144
Name = "ShowClearButton",
165145
Description = Localizer["SearchesShowClearButton"],

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.search-result {
2+
border: solid 1px var(--bs-boder-color);
3+
display: flex;
4+
border-radius: 10px;
5+
padding: .5rem;
6+
border: 1px dashed var(--bs-border-color);
7+
}
8+
9+
.search-result-avatar {
10+
flex-basis: 60px;
11+
border-radius: 10px;
12+
border: 2px solid var(--bb-primary-color);
13+
overflow: hidden;
14+
margin-inline-end: 1rem;
15+
}
16+
17+
.search-result-avatar img {
18+
width: 100%;
19+
}
20+
21+
.search-result-main {
22+
flex-grow: 1;
23+
width: 1%;
24+
min-width: 0;
25+
}
26+
27+
.search-result-address {
28+
margin-top: .25rem;
29+
font-size: 86%;
30+
color: #c0c4cc;
31+
}

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4182,26 +4182,24 @@
41824182
"SearchesDisplayButtonTitle": "The Empty button is displayed",
41834183
"SearchesDisplayButtonIntro": "Control whether the Empty button is displayed by setting the <code>ShowClearButton</code> parameter",
41844184
"SearchesKeyboardsTitle": "Keyboard input instant search",
4185-
"SearchesKeyboardsIntro": "Control whether search operations are performed in real time by setting <code>the IsOnInputTrigger</code> parameter",
4185+
"SearchesKeyboardsIntro": "Control whether search operations are performed in real time by setting <code>IsTriggerSearchByInput</code> parameter",
41864186
"SearchesValidateFormTitle": "ValidateForm",
41874187
"SearchesValidateFormIntro": "Inside <code>ValidateForm</code>",
4188-
"SearchesChildContent": "Content",
4189-
"SearchesItems": "Data source",
41904188
"SearchesNoDataTip": "Auto-complete data prompts when there is no match",
41914189
"SearchesNoDataTipDefaultValue": "No matching data",
41924190
"SearchesButtonLoadingIcon": "Searching for button icon",
41934191
"SearchesClearButtonIcon": "Clear the button color",
41944192
"SearchesClearButtonText": "Empty the button text",
41954193
"SearchesClearButtonColor": "Clear the button color",
41964194
"SearchesButtonColor": "Search for button color",
4197-
"SearchesIsLikeMatch": "Whether fuzzy matching is turned on",
41984195
"SearchesIsAutoFocus": "Whether to get the focus automatically",
41994196
"SearchesIsAutoClearAfterSearch": "Click Search to automatically empty the search box",
4200-
"SearchesIsOnInputTrigger": "Whether the search mode is triggered by input, it is triggered by clicking the search button by default",
4201-
"SearchesIgnoreCase": "Whether case is ignored when matching",
4197+
"SearchesIsTriggerSearchByInput": "Whether the search mode is triggered by input, it is triggered by clicking the search button by default",
42024198
"SearchesShowClearButton": "Whether the Clear button is displayed",
42034199
"SearchesOnSearch": "Call back this delegate when you click Search",
4204-
"SearchesOnClear": "Click Recall this order when emptying"
4200+
"SearchesOnClear": "Click Recall this order when emptying",
4201+
"SearchesItemTemplateTitle": "Item Template",
4202+
"SearchesItemTemplateIntro": "By setting <code>ItemTemplate</code> and matching generic data, you can achieve any desired effect. In this example, by searching for any keyword, the backend calls any third-party search results and displays them. After selecting the search item, you can handle it yourself through the <code>OnSelectedItemChanged</code> callback method"
42054203
},
42064204
"BootstrapBlazor.Server.Components.Samples.Titles": {
42074205
"Title": "Title",

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4182,26 +4182,24 @@
41824182
"SearchesDisplayButtonTitle": "显示清空按钮",
41834183
"SearchesDisplayButtonIntro": "通过设置 <code>ShowClearButton</code> 参数控制是否显示清空按钮",
41844184
"SearchesKeyboardsTitle": "键盘输入即时搜索",
4185-
"SearchesKeyboardsIntro": "通过设置 <code>IsOnInputTrigger</code> 参数控制是否实时进行搜索操作",
4185+
"SearchesKeyboardsIntro": "通过设置 <code>IsTriggerSearchByInput</code> 参数控制是否实时进行搜索操作",
41864186
"SearchesValidateFormTitle": "验证表单内使用",
41874187
"SearchesValidateFormIntro": "内置于 <code>ValidateForm</code> 使用，输入中文时不会多次触发搜索功能",
4188-
"SearchesChildContent": "内容",
4189-
"SearchesItems": "数据源",
41904188
"SearchesNoDataTip": "自动完成数据无匹配项时提示信息",
41914189
"SearchesNoDataTipDefaultValue": "无匹配数据",
41924190
"SearchesButtonLoadingIcon": "正在搜索按钮图标",
41934191
"SearchesClearButtonIcon": "清空按钮颜色",
41944192
"SearchesClearButtonText": "清空按钮文本",
41954193
"SearchesClearButtonColor": "清空按钮颜色",
41964194
"SearchesButtonColor": "搜索按钮颜色",
4197-
"SearchesIsLikeMatch": "是否开启模糊匹配",
41984195
"SearchesIsAutoFocus": "是否自动获得焦点",
41994196
"SearchesIsAutoClearAfterSearch": "点击搜索后是否自动清空搜索框",
4200-
"SearchesIsOnInputTrigger": "搜索模式是否为输入即触发,默认点击搜索按钮触发",
4201-
"SearchesIgnoreCase": "匹配时是否忽略大小写",
4197+
"SearchesIsTriggerSearchByInput": "搜索模式是否为输入即触发,默认点击搜索按钮触发",
42024198
"SearchesShowClearButton": "是否显示清除按钮",
42034199
"SearchesOnSearch": "点击搜索时回调此委托",
4204-
"SearchesOnClear": "点击清空时回调此委托"
4200+
"SearchesOnClear": "点击清空时回调此委托",
4201+
"SearchesItemTemplateTitle": "模板",
4202+
"SearchesItemTemplateIntro": "通过设置 <code>ItemTemplate</code> 配合泛型数据可以做出自己想要的任何效果，本例中通过搜索任意关键字，后台调用任意第三方搜索结果并且进行展示，选中搜索项后通过 <code>OnSelectedItemChanged</code> 回调方法可以自行处理"
42054203
},
42064204
"BootstrapBlazor.Server.Components.Samples.Titles": {
42074205
"Title": "Title 网站标题",

‎src/BootstrapBlazor/BootstrapBlazor.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

33
<PropertyGroup>
4-
<Version>9.2.0-beta01</Version>
4+
<Version>9.2.1-beta01</Version>
55
</PropertyGroup>
66

77
<ItemGroup>

‎src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.cs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,12 @@ public partial class AutoComplete
6969
[Parameter]
7070
public bool ShowDropdownListOnFocus { get; set; } = true;
7171

72+
/// <summary>
73+
/// 获得/设置 是否显示无匹配数据选项 默认 true 显示
74+
/// </summary>
75+
[Parameter]
76+
public bool ShowNoDataTip { get; set; } = true;
77+
7278
/// <summary>
7379
/// IStringLocalizer 服务实例
7480
/// </summary>

‎src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export function init(id, invoke) {
6161
}
6262

6363
el.classList.add('is-loading');
64-
await invoke.invokeMethodAsync('TriggerOnChange', v, useInput);
64+
await invoke.invokeMethodAsync('TriggerOnChange', v);
6565
el.classList.remove('is-loading');
6666
});
6767

0 commit comments

Comments
 (0)