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 库的输入组件, 我们启用显示标签, 使用逐键输入, 自动获取焦点属性.
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. 运行看效果
不知道你们满不满意, 我已经满意了, :->
关联项目
FreeSql QQ群:4336577
BA & Blazor QQ群:795206915
Maui Blazor 中文社区 QQ群:645660665
知识共享许可协议
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名AlexChow(包含链接: https://github.com/densen2014 ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系 。
转载声明
本文来自博客园,作者:周创琳 AlexChow,转载请注明原文链接:https://www.cnblogs.com/densen2014/p/18286508
AlexChow
今日头条 | 博客园 | 知乎 | Gitee | GitHub
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek-R1本地部署如何选择适合你的版本?看这里
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 普通人也能轻松掌握的20个DeepSeek高频提示词(2025版)