Blazor 逐键搜索并动态反馈到url

Blazor 逐键搜索并动态反馈到url

源码

前言: 今天打开了 spotify 网页版找歌, 突然发现这个功能很抓眼球,于是试试blazor能不能模仿一下.

(博客园传gif貌似有条例,gif自己点击链接查看吧)

1. 节省时间,直接用模板开搞

新建项目,使用 Bootstrap Blazor App 模板 , 命名为 b22dynamicURL

BootstrapBlazor简介: BootstrapBlazor 是一套基于 Bootstrap 和 Blazor 的企业级组件库，可以认为是 Bootstrap 项目的 Blazor 版实现。

2. 运行一次,看看效果

显示如下模板站点,就说明你前面的操作都对了.

3. 修改默认标签页为单页

`private bool UseTabSet { get; set; } = true; `

改为

`private bool UseTabSet { get; set; } = false;`

4. 替换首页代码

@page "/"
@attribute [TabItemOption(Text = "Index", Closable = false)]
@page "/music/{Value?}"
@using System.Diagnostics.CodeAnalysis

<PageTitle>Index</PageTitle>

<div>
    @Value
</div>

<BootstrapInput @bind-Value="Value" ShowLabel="true" UseInputEvent="true" OnValueChanged="_=>UpdateSearching()" IsAutoFocus />

@code{
    [NotNull]
    [Inject]
    public NavigationManager? NavigationManager { get; set; }

    [DisplayName("搜索")]
    [Parameter]
    public string? Value { get; set; } = "12345";

    Task UpdateSearching()
    {
        NavigationManager.NavigateTo($"music/{Value}");
        return Task.CompletedTask;
    }
}

其中 <BootstrapInput @bind-Value="Value" ShowLabel="true" UseInputEvent="true" OnValueChanged="_=>UpdateSearching()" IsAutoFocus /> 为 BootstrapBlazor 库的输入组件, 我们启用显示标签, 使用逐键输入, 自动获取焦点属性.

BootstrapInput组件

5. 运行看效果

可以看到,基本上满足需求.

6. 拼音,拼音缩写

万能的群友又来提问了 "如果中文能直接转英文，就好了" , 虽然不太明白说什么,但是可以安排一下

首先拉一个老掉牙的拼音包 Microsoft.International.Converters.PinYinConverter

然后代码改一下

@page "/"
@attribute [TabItemOption(Text = "Index", Closable = false)]
@page "/music/{Value?}"
@using System.Diagnostics.CodeAnalysis
@using Microsoft.International.Converters.PinYinConverter

<PageTitle>Index</PageTitle>


<div>
    @Value

    拼音

    <i>
        @pinyin
    </i>

    拼音缩写

    <b>
        @pinyinCompat
    </b>
</div>
<BootstrapInput @bind-Value="Value" ShowLabel="true" UseInputEvent="true" OnValueChanged="_=>UpdateSearching()" IsAutoFocus />

@code{
    [NotNull]
    [Inject]
    public NavigationManager? NavigationManager { get; set; }

    [DisplayName("搜索")]
    [Parameter]
    public string? Value { get; set; } = "12345";

    string? pinyin { get; set; } = "";
    string? pinyinCompat { get; set; } = "";


    Task UpdateSearching()
    {
        if (!string.IsNullOrWhiteSpace(Value))
        {
            pinyin = string.Empty;
            pinyinCompat = string.Empty;

            foreach (char c in Value)
            {
                if (ChineseChar.IsValidChar(c))
                {
                    ChineseChar chineseChar = new ChineseChar(c);
                    pinyin += chineseChar.Pinyins[0];
                    pinyinCompat += chineseChar.Pinyins[0][0];
                }
                else
                {
                    pinyin += c;
                    pinyinCompat += c;
                }
            }
        }

        NavigationManager.NavigateTo($"music/{Value}");
        return Task.CompletedTask;
    }
}

7. 运行看效果

不知道你们满不满意, 我已经满意了, :->