Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Search 搜索框

用于数据搜索

输入部分数据进行搜索

Demo

请输入 1234 获取智能提示,通过设置 IsAutoFocus="true" 开启自动获得焦点功能

通过设置 IsAutoClearAfterSearch="true" 开启搜索后自动清空搜索框功能

Demo

通过设置 ShowClearButton 参数控制是否显示清空按钮

Demo

通过设置 IsOnInputTrigger 参数控制是否实时进行搜索操作

Demo

Attributes

Loading...
@page "/searchs"

<h3>Search 搜索框</h3>

<h4>用于数据搜索</h4>

<DemoBlock Title="基本用法" Introduction="输入部分数据进行搜索" Name="Normal">
    <p>请输入 <code>1234</code> 获取智能提示,通过设置 <code>IsAutoFocus="true"</code> 开启自动获得焦点功能</p>
    <Search IgnoreCase="true" IsLikeMatch="true" IsAutoFocus="true" PlaceHolder="搜索示例" Items="@Items" OnSearch="@OnSearch1" IsSelectAllTextOnFocus="true"></Search>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="搜索后自动清空值" Introduction="通过设置 <code>IsAutoClearAfterSearch=&quot;true&quot;</code> 开启搜索后自动清空搜索框功能" Name="ClearValue">
    <Search IgnoreCase="true" IsLikeMatch="true" IsAutoClearAfterSearch="true" PlaceHolder="搜索示例" Items="@Items" OnSearch="@OnSearch2"></Search>
    <BlockLogger @ref="Trace2" class="mt-3" />
</DemoBlock>

<DemoBlock Title="显示清空按钮" Introduction="通过设置 <code>ShowClearButton</code> 参数控制是否显示清空按钮" Name="DispalyButton">
    <Search IgnoreCase="true" IsLikeMatch="true" PlaceHolder="搜索示例" ShowClearButton="true" Items="@Items" OnSearch="@OnSearch3" OnClear="@OnClear"></Search>
    <BlockLogger @ref="Trace3" class="mt-3" />
</DemoBlock>

<DemoBlock Title="键盘输入即时搜索" Introduction="通过设置 <code>IsOnInputTrigger</code> 参数控制是否实时进行搜索操作" Name="keyboards">
    <Search IgnoreCase="true" IsLikeMatch="true" PlaceHolder="搜索示例" 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;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

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 static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "ChildContent",
                Description = "内容",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Items",
                Description = "内容",
                Type = "IEnumerable<string>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "NoDataTip",
                Description = "自动完成数据无匹配项时提示信息",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "无匹配数据"
            },
            new AttributeItem()
            {
                Name="SearchButtonLoadingIcon",
                Description = "正在搜索按钮图标",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "fa fa-fw fa-spinner fa-spin"
            },
            new AttributeItem() {
                Name = "ClearButtonIcon",
                Description = "清空按钮图标",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "fa fa-trash"
            },
            new AttributeItem() {
                Name = "ClearButtonText",
                Description = "清空按钮文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ClearButtonColor",
                Description = "清空按钮颜色",
                Type = "Color",
                ValueList = " — ",
                DefaultValue = "Secondary"
            },
            new AttributeItem() {
                Name = "SearchButtonColor",
                Description = "搜索按钮颜色",
                Type = "Color",
                ValueList = " — ",
                DefaultValue = "Primary"
            },
            new AttributeItem() {
                Name = "IsLikeMatch",
                Description = "是否开启模糊匹配",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsAutoFocus",
                Description = "是否自动获得焦点",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsAutoClearAfterSearch",
                Description = "点击搜索后是否自动清空搜索框",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsOnInputTrigger",
                Description = "搜索模式是否为输入即触发,默认点击搜索按钮触发",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem()
            {
                Name = "IgnoreCase",
                Description = "匹配时是否忽略大小写",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "true"
            },
            new AttributeItem()
            {
                Name = "ShowClearButton",
                Description = "是否显示清除按钮",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem()
            {
                Name="OnSearch",
                Description = "点击搜索时回调此委托",
                Type = "Func<string, Task>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem()
            {
                Name="OnClear",
                Description = "点击清空时回调此委托",
                Type = "Func<string, Task>",
                ValueList = " — ",
                DefaultValue = " — "
            }
    };
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload