
Search box
Used for data search
Enter some of the data to search
Demo
Please enter 1234
to get the Smart Prompt and turn on auto focus by setting IsAutoFocus='true'
Turn on the automatic emptying of the search box after search by setting IsAutoClearAfterSearch="true"
Demo
Control whether the Empty button is displayed by setting the ShowClearButton
parameter
Demo
Control whether search operations are performed in real time by setting the IsOnInputTrigger
parameter
Demo
Attributes
@page "/searchs"
@inject IStringLocalizer<Searchs> Localizer
<h3>Search box</h3>
<h4>Used for data search</h4>
<DemoBlock Title="Basic usage" Introduction="Enter some of the data to search" Name="Normal">
<p>Please enter <code>1234</code> to get the Smart Prompt and turn on auto focus by setting <code>IsAutoFocus='true'</code></p>
<Search IgnoreCase="true" IsLikeMatch="true" IsAutoFocus="true" PlaceHolder="Search for examples" Items="@Items" OnSearch="@OnSearch1" IsSelectAllTextOnFocus="true"></Search>
<BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>
<DemoBlock Title="Values are automatically emptied after searching" Introduction="Turn on the automatic emptying of the search box after search by setting <code>IsAutoClearAfterSearch="true"</code>" Name="ClearValue">
<Search IgnoreCase="true" IsLikeMatch="true" IsAutoClearAfterSearch="true" PlaceHolder="Search for examples" Items="@Items" OnSearch="@OnSearch2"></Search>
<BlockLogger @ref="Trace2" class="mt-3" />
</DemoBlock>
<DemoBlock Title="The Empty button is displayed" Introduction="Control whether the Empty button is displayed by setting the <code>ShowClearButton</code> parameter" Name="DispalyButton">
<Search IgnoreCase="true" IsLikeMatch="true" PlaceHolder="Search for examples" ShowClearButton="true" Items="@Items" OnSearch="@OnSearch3" OnClear="@OnClear"></Search>
<BlockLogger @ref="Trace3" class="mt-3" />
</DemoBlock>
<DemoBlock Title="Keyboard input instant search" Introduction="Control whether search operations are performed in real time by setting <code>the IsOnInputTrigger</code> parameter" Name="keyboards">
<Search IgnoreCase="true" IsLikeMatch="true" PlaceHolder="Search for examples" IsOnInputTrigger="true" Items="@Items" OnSearch="@OnSearch4"></Search>
<BlockLogger @ref="Trace4" class="mt-3" />
</DemoBlock>
<AttributeTable Items="@GetAttributes()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Components;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public sealed partial class Searchs
{
private static IEnumerable<string> Items => new string[] { "1", "12", "123", "1234" };
[NotNull]
private BlockLogger? Trace { get; set; }
[NotNull]
private BlockLogger? Trace2 { get; set; }
[NotNull]
private BlockLogger? Trace3 { get; set; }
[NotNull]
private BlockLogger? Trace4 { get; set; }
private Task OnSearch1(string searchText)
{
Trace.Log($"SearchText: {searchText}");
return Task.CompletedTask;
}
private Task OnSearch2(string searchText)
{
Trace2.Log($"SearchText: {searchText}");
return Task.CompletedTask;
}
private Task OnSearch3(string searchText)
{
Trace3.Log($"SearchText: {searchText}");
return Task.CompletedTask;
}
private Task OnSearch4(string searchText)
{
Trace4.Log($"SearchText: {searchText}");
return Task.CompletedTask;
}
private Task OnClear(string searchText)
{
Trace3.Log($"OnClear: {searchText}");
return Task.CompletedTask;
}
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "ChildContent",
Description = Localizer["ChildContent"],
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Items",
Description = Localizer["Items"],
Type = "IEnumerable<string>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "NoDataTip",
Description = Localizer["NoDataTip"],
Type = "string",
ValueList = " — ",
DefaultValue = Localizer["NoDataTipDefaultValue"]
},
new AttributeItem()
{
Name="SearchButtonLoadingIcon",
Description = Localizer["SearchButtonLoadingIcon"],
Type = "string",
ValueList = " — ",
DefaultValue = "fa fa-fw fa-spinner fa-spin"
},
new AttributeItem() {
Name = "ClearButtonIcon",
Description = Localizer["ChildContent"],
Type = "string",
ValueList = " — ",
DefaultValue = "fa fa-trash"
},
new AttributeItem() {
Name = "ClearButtonText",
Description = Localizer["ClearButtonText"],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "ClearButtonColor",
Description = Localizer["ClearButtonColor"],
Type = "Color",
ValueList = " — ",
DefaultValue = "Secondary"
},
new AttributeItem() {
Name = "SearchButtonColor",
Description = Localizer["SearchButtonColor"],
Type = "Color",
ValueList = " — ",
DefaultValue = "Primary"
},
new AttributeItem() {
Name = "IsLikeMatch",
Description = Localizer["IsLikeMatch"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "IsAutoFocus",
Description = Localizer["IsAutoFocus"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "IsAutoClearAfterSearch",
Description = Localizer["IsAutoClearAfterSearch"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "IsOnInputTrigger",
Description = Localizer["IsOnInputTrigger"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem()
{
Name = "IgnoreCase",
Description = Localizer["IgnoreCase"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem()
{
Name = "ShowClearButton",
Description = Localizer["ShowClearButton"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem()
{
Name="OnSearch",
Description = Localizer["OnSearch"],
Type = "Func<string, Task>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem()
{
Name="OnClear",
Description = Localizer["OnClear"],
Type = "Func<string, Task>",
ValueList = " — ",
DefaultValue = " — "
}
};
}