Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Search 搜索框

用于数据搜索

输入部分数据进行搜索

Demo

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

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

Demo

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

Demo

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

Demo

Attributes

Loading...
@page "/searchs"

<h3>Search 搜索框</h3>

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

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

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

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

<Block Title="键盘输入即时搜索" Introduction="通过设置 <code>IsOnInputTrigger</code> 参数控制是否实时进行搜索操作">
    <Search IgnoreCase="true" IsLikeMatch="true" PlaceHolder="搜索示例" IsOnInputTrigger="true" Items="@Items" OnSearch="@OnSearch4"></Search>
    <BlockLogger @ref="Trace4" class="mt-3" />
</Block>

<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.Pages.Components;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Searchs
    {
        private 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 = "内容",
                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( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload