Bootstrap.Blazor 自动完成/填充升级版 RemoteSourceAutoFill

这两天用 Blazor.Server 写了个小工具，算是对 Blazor 的入门吧。
用到了组件库：Bootstrap.Blazor 。这个库存，总体来说，很棒。

使用过程中，发现了一个BUG，bool? 类型的数据，DisplayText 显示不出来, 用于修改时， bool? 类型的数据，也读取不到真实的值。

bool? 的DisplayText 读取不到

另外， AutoFill / AutoComplete 两个组件的设计，脱离了真实的使用场景。自动完成的数据源，一般都是建立在海量的数据基础之上（比如从 ES 中实时获取查询结果）。但是这两个组件却使用的是本地数据源，这显然是不可能的。

做为 AutoComplete 的升级（AutoComplete 的数据源只能是 IEnumerable<string>）， AutoFill (数据源是IEnumerable<TValue>) 要求 TValue 必须是实现ISelectedItem，这个设计可以说很不合理，太麻烦。

为了解决上面两个问题，我复制 了 AutoFill 的源码，写了这个 RemoteSourceAutoFill

RemoteSourceAutoFill.razor

@typeparam TValue
@inherits BootstrapInput<TValue>

@if (IsShowLabel)
{
    <label class="form-label" required="@Required" for="@Id">@DisplayText</label>
}

<div class="@ClassString" @ref="RemoteSourceAutoFillElement">
    <input @attributes="AdditionalAttributes" class="@ClassName" autocomplete="off" type="text" placeholder="@PlaceHolder" @bind-value="@Query" @bind-value:event="oninput" @onblur="OnBlur" @onkeyup="OnKeyUp" @ref="FocusElement" />
    <i class="fa fa-fw fa-spinner fa-spin"></i>
    <div class="select-dropdown">
        <ul class="dropdown-list">
            @if (items != null && items.Any())
            {
                foreach (var item in items)
                {
                    <li class="dropdown-item" @onmousedown="e => OnClickItem(item)">
                    @if (Template != null)
                    {
                        @Template(item) 
                    }
                    else
                    {
                       <div>@this.GetDisplayText(item)</div>
                    }
                    </li>
                }
            }
            else
            {
                <li class="dropdown-item">@NoDataTip</li>
            }
        </ul>
    </div>
</div>

<CascadingValue Value="this" IsFixed="true">
    @ChildContent
</CascadingValue>

RemoteSourceAutoFill.razor.cs

    /// <summary>
    /// 支持远程数据源的自动完成
    /// </summary>
    /// <typeparam name="TValue"></typeparam>
    public partial class RemoteSourceAutoFill<TValue> /*where TValue : ISelectedItem*/
    {
        private bool _isLoading;
        private bool _isShown;
        private string _lastFilterText;

        /// <summary>
        /// 获得 组件样式
        /// </summary>
        protected virtual string ClassString => CssBuilder.Default("auto-complete")
            .AddClass("is-loading", _isLoading)
            .AddClass("is-complete", _isShown)
            .Build();

        /// <summary>
        /// 
        /// </summary>
        private IEnumerable<TValue> items;

        /// <summary>
        /// 获得/设置 无匹配数据时显示提示信息 默认提示"无匹配数据"
        /// </summary>
        [Parameter]
        [NotNull]
        public string NoDataTip { get; set; }


        /// <summary>
        /// 获得/设置 候选项模板
        /// </summary>
        [Parameter]
        public RenderFragment<TValue> Template { get; set; }



        /// <summary>
        /// 获得/设置 选项改变回调方法 默认 null
        /// </summary>
        [Parameter]
        public Func<TValue, Task> OnSelectedItemChanged { get; set; }



        /// <summary>
        /// 文本框内容改变时, 触发的数据查询
        /// </summary>
        [Parameter]
        public Func<string, Task<IEnumerable<TValue>>> Search { get; set; }


        /// <summary>
        /// 获取显示值
        /// </summary>
        [Parameter]
        [NotNull]
        public Func<TValue, string> GetDisplayText { get; set; }


        /// <summary>
        /// 查询的字符串, 文本框的值
        /// </summary>
        [Parameter]
        public string Query { get; set; }


        /// <summary>
        /// 
        /// </summary>
        [Parameter]
        public string QueryChanged { get; set; }


        /// <summary>
        /// 
        /// </summary>
        [Inject]
        [NotNull]
        private IStringLocalizer<AutoComplete> Localizer { get; set; }


        /// <summary>
        /// 
        /// </summary>
        private TValue ActiveSelectedItem { get; set; }

        /// <summary>
        /// 
        /// </summary>
        protected ElementReference RemoteSourceAutoFillElement { get; set; }

        /// <summary>
        /// 
        /// </summary>
        protected int? CurrentItemIndex { get; set; }


        /// <summary>
        /// OnInitialized 方法
        /// </summary>
        protected override void OnInitialized()
        {
            base.OnInitialized();

            NoDataTip ??= Localizer[nameof(NoDataTip)];
            PlaceHolder ??= Localizer[nameof(PlaceHolder)];
            items ??= Enumerable.Empty<TValue>();
        }

        /// <summary>
        /// firstRender
        /// </summary>
        /// <param name="firstRender"></param>
        /// <returns></returns>
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            await base.OnAfterRenderAsync(firstRender);

            if (CurrentItemIndex.HasValue)
            {
                await InvokeVoidAsync(JSRuntime, RemoteSourceAutoFillElement, "bb_autoScrollItem", CurrentItemIndex.Value);
            }
        }


        /// <summary>
        /// 调用 JSInvoke 方法
        /// </summary>
        /// <param name="jsRuntime">IJSRuntime 实例</param>
        /// <param name="el">Element 实例或者组件 Id</param>
        /// <param name="func">Javascript 方法</param>
        /// <param name="args">Javascript 参数</param>
        public static ValueTask InvokeVoidAsync(IJSRuntime jsRuntime, object el = null, string func = null, params object[] args)
        {
            var paras = new List<object>();
            if (el != null) paras.Add(el);
            if (args != null) paras.AddRange(args);
            try
            {
                var _ = jsRuntime.InvokeVoidAsync($"$.{func}", paras.ToArray()).ConfigureAwait(false);
            }
            catch (TaskCanceledException) { }
            return ValueTask.CompletedTask;
        }

        /// <summary>
        /// OnBlur 方法
        /// </summary>
        protected async Task OnBlur()
        {
            _isShown = false;
            if (OnSelectedItemChanged != null && ActiveSelectedItem != null)
            {
                await OnSelectedItemChanged(ActiveSelectedItem);
                ActiveSelectedItem = default;
            }
        }

        /// <summary>
        /// 鼠标点击候选项时回调此方法
        /// </summary>
        protected virtual async Task OnClickItem(TValue val)
        {
            CurrentValue = val;
            this.Query = val != null ? this.GetDisplayText(val) : "";
            ActiveSelectedItem = default;
            if (OnSelectedItemChanged != null)
            {
                await OnSelectedItemChanged(val);
            }
        }

        /// <summary>
        /// 获得/设置 是否跳过 Enter 按键处理 默认 false
        /// </summary>
        protected bool SkipEnter { get; set; }

        /// <summary>
        /// 获得/设置 是否跳过 Esc 按键处理 默认 false
        /// </summary>
        protected bool SkipEsc { get; set; }

        /// <summary>
        /// OnKeyUp 方法
        /// </summary>
        /// <param name="args"></param>
        /// <returns></returns>
        protected virtual async Task OnKeyUp(KeyboardEventArgs args)
        {
            if (!_isLoading && _lastFilterText != this.Query)
            {
                _isLoading = true;
                _lastFilterText = this.Query;
                this.items = await this.Search(this.Query);
                _isLoading = false;
            }

            var source = this.items?.ToList() ?? new List<TValue>();
            if (source.Any())
            {
                _isShown = true;

                // 键盘向上选择
                if (_isShown && args.Key == "ArrowUp")
                {
                    var index = 0;
                    if (ActiveSelectedItem != null)
                    {
                        index = source.IndexOf(ActiveSelectedItem) - 1;
                        if (index < 0)
                        {
                            index = source.Count - 1;
                        }
                    }
                    ActiveSelectedItem = source[index];
                    CurrentItemIndex = index;
                }
                else if (_isShown && args.Key == "ArrowDown")
                {
                    var index = 0;
                    if (ActiveSelectedItem != null)
                    {
                        index = source.IndexOf(ActiveSelectedItem) + 1;
                        if (index > source.Count - 1)
                        {
                            index = 0;
                        }
                    }
                    ActiveSelectedItem = source[index];
                    CurrentItemIndex = index;
                }
                else if (args.Key == "Escape")
                {
                    await OnBlur();
                    if (!SkipEsc && OnEscAsync != null)
                    {
                        await OnEscAsync(Value);
                    }
                }
                else if (args.Key == "Enter")
                {
                    if (ActiveSelectedItem == null)
                    {
                        ActiveSelectedItem = source.FirstOrDefault();
                    }
                    if (ActiveSelectedItem != null)
                    {
                        this.Query = this.GetDisplayText(ActiveSelectedItem);
                    }
                    await OnBlur();
                    if (!SkipEnter && OnEnterAsync != null)
                    {
                        await OnEnterAsync(Value);
                    }
                }

                if (this.ActiveSelectedItem != null)
                    this.CurrentValue = this.ActiveSelectedItem;
            }
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="value"></param>
        /// <returns></returns>
        protected override string FormatValueAsString(TValue value) => this.GetDisplayText(value);

        ///// <summary>
        ///// 
        ///// </summary>
        ///// <param name="value"></param>
        ///// <param name="result"></param>
        ///// <param name="validationErrorMessage"></param>
        ///// <returns></returns>
        //protected override bool TryParseValueFromString(string value, [MaybeNullWhen(false)] out TValue result, out string? validationErrorMessage)
        //{
        //    //CurrentValue.Text = value;
        //    result = CurrentValue;
        //    validationErrorMessage = null;
        //    return true;
        //}
    }

使用：

<GroupBox Title="查询">
    <Row ItemsPerRow="ItemsPerRow.Three" RowType="RowType.Inline">
        <RemoteSourceAutoFill TValue="CNB.ES.Models.B2CCity"
                              @bind-Value="city"
                              Search="SearchCity"
                              GetDisplayText="GetCityDisplayText"
                              DisplayText="城市"
                              ShowLabel="true" />
        @*Query="@Data?.JegoHotelDetail?.CityCode"*@

        <BootstrapInput @bind-Value="hotelQuery" DisplayText="酒店关键字" ShowLabel="true" />
        <Button Text="查找" OnClick="SearchHotel" />
    </Row>
</GroupBox>

        private async Task<IEnumerable<B2CCity>> SearchCity(string txt)
        {
            var rst = await cityFinder.QueryAsync(new ES.Conds.B2CCityFindCondition()
            {
                Str = txt,
                Page = 0,
                PageSize = 10,
            });

            return rst?.Result;
        }

        private string GetCityDisplayText(B2CCity city)
        {
            return city.NameCnLong;
        }

Bootstrap.Blazor 自动完成/填充 升级版 RemoteSourceAutoFill

Bootstrap.Blazor 自动完成/填充升级版 RemoteSourceAutoFill