Blazor 逐键搜索并动态反馈到url-编程知识

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

news/2024/10/6 3:59:16/文章来源:https://www.cnblogs.com/densen2014/p/18286508

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

源码

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

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

新建项目,使用bb模板, 命名为 b22dynamicURL

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 库的输入组件, 我们启用显示标签, 使用逐键输入, 自动获取焦点属性.

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;}
}