Blazor Autocomplete/Typeahead 组件制作教程

Blazor中可基于InputText、键盘事件、异步搜索与下拉渲染实现轻量Autocomplete组件；需包含防抖逻辑、键盘导航（方向键/Enter/ESC）、样式优化及空结果提示。

Blazor 中没有内置的 Autocomplete（也称 Typeahead）组件，但用 InputText + 键盘事件 + 异步搜索逻辑 + 下拉列表渲染 就能轻松实现一个轻量、可控、无第三方依赖的 Autocomplete 组件。

基础结构：输入框 + 下拉列表容器

核心是两个部分：一个可编辑的输入框，一个动态显示匹配项的下拉列表（用 <p> 或 <code><ul></ul>）。下拉列表只在有匹配结果且输入框聚焦时显示。

• 用 @bind 双向绑定输入值（如 @bind="searchTerm"）
• 用 @oninput 或 @onkeyup 触发搜索（推荐 @oninput，更及时）
• 用 @if (showDropdown && suggestions.Any()) 控制下拉显示
• 给下拉加 position: absolute 和 z-index，确保浮在其他元素上方

搜索逻辑：防抖 + 异步请求 + 缓存可选

用户每敲一个字都查后端？不行。得加防抖（debounce），避免无效请求；用 Task.Delay 模拟或配合实际 HTTP 调用。

• 定义私有字段：private Timer? debounceTimer;
• 在 @oninput 回调里先 debounceTimer?.Dispose()，再启动新定时器（如 300ms 后执行搜索）
• 搜索方法标记为 async Task，调用 HttpClient.GetFromJsonAsync<list>>()</list> 或本地过滤
• 若数据量小且稳定，可预加载后做内存过滤，省去每次请求

交互细节：键盘导航 + 选中回填

真正好用的 Autocomplete 支持方向键上下选择、回车确认、ESC 关闭——这些全靠 @onkeydown。

标签： css js json 后端 nas 键盘事件