Blazor 组件库 BootstrapBlazor 中AutoFill组件介绍

组件介绍

AutoFill 自动填充组件

通过智能感应提示选项，选中后自动填充表单。

他的代码如下：

<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" />

private Task OnSelectedItemChanged(Foo foo)
    {
        Model = Utility.Clone(foo);
        StateHasChanged();
        return Task.CompletedTask;
    }

组件的属性介绍

DisplayCount：候选项的匹配数量。

NoDataTip：无数据时的提示内容。默认值为 无匹配数据。

IgnoreCase：是否在匹配候选项时不区分大小写。默认为true不区分大小写。

IsLikeMatch：是否启用模糊匹配，默认为true启用模糊匹配。

Items：类型为 IEnumerable<TValue>,为要筛选的内容列表。

Debounce：防抖，单位为毫秒，默认为0，一般在需要跟数据库交互或者其他时间，对触发频率要求比较高的时候使用，在防抖时间内只会产生一条change事件。

OnGetDisplayText：获取显示在输入框中的文字。类型为Func<TValue, string>。有两个用处

1. 在没有ConsutomFilter的时候筛选内容。

2. 当选中项目的时候将文字放入输入框。

OnCustomFilter：自定义过滤器，类型为 Func<string, Task<IEnumerable<TValue>>>，用来处理自定义的筛选事件。此过滤器会覆盖OnGetDisplayText的筛选结果。

OnSelectedItemChanged：选项改变回调方法，类型为 Func<TValue, Task>，当选择了下拉列表中某一项时会回调对应的内容。

Template： RenderFragment<TValue>，下拉列表的样式模板。

SkipEnter：是否跳过Enter键的处理。

SkipEsc：是否跳过Esc键的处理。