0

0

Blazor Autocomplete/Typeahead 组件制作教程

月夜之吻

月夜之吻

发布时间:2025-12-13 20:25:58

|

626人浏览过

|

来源于php中文网

原创

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

blazor autocomplete/typeahead 组件制作教程

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

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

核心是两个部分:一个可编辑的输入框,一个动态显示匹配项的下拉列表(用

    )。下拉列表只在有匹配结果且输入框聚焦时显示。
    • @bind 双向绑定输入值(如 @bind="searchTerm"
    • @oninput@onkeyup 触发搜索(推荐 @oninput,更及时)
    • @if (showDropdown && suggestions.Any()) 控制下拉显示
    • 给下拉加 position: absolutez-index,确保浮在其他元素上方

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

    用户每敲一个字都查后端?不行。得加防抖(debounce),避免无效请求;用 Task.Delay 模拟或配合实际 HTTP 调用。

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

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

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

    Perl 基础教程 chm
    Perl 基础教程 chm

    Perl 基础入门中文教程,chm格式,讲述PERL概述、简单变量、操作符、列表和数组变量、文件读写、模式匹配、控制结构、子程序、关联数组/哈希表、格式化输出、文件系统、引用、面向对象、包和模块等知识点。适合初学者阅读和了解Perl脚本语言。

    下载
    • 监听 Enter:如果当前有高亮项,就选中它并关闭下拉;否则提交当前输入
    • 监听 ArrowDown/ArrowUp:维护一个 int selectedIndex,循环切换高亮项
    • 监听 Escape:清空高亮、隐藏下拉、保持输入框内容
    • 点击下拉项时,直接赋值给 searchTerm 并触发绑定更新

    样式与体验优化建议

    默认样式太简陋?加点 CSS 让它像真实组件:

    • 输入框加 border-bottom-left-radius: 0; border-bottom-right-radius: 0;,下拉加对应圆角补全视觉连贯性
    • 高亮项用 background-color: #007bff; color: white;,普通项留白或浅灰背景
    • 加 loading 状态:搜索中显示「…」或旋转图标(用 @if (isLoading)
    • 空结果时显示「无匹配项」提示,提升反馈感

    基本上就这些。不复杂但容易忽略防抖和键盘支持——补上这两块,你的 Blazor Autocomplete 就能对标主流 UI 库了。

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    if什么意思
    if什么意思

    if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

    778

    2023.08.22

    string转int
    string转int

    在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

    463

    2023.08.02

    int占多少字节
    int占多少字节

    int占4个字节,意味着一个int变量可以存储范围在-2,147,483,648到2,147,483,647之间的整数值,在某些情况下也可能是2个字节或8个字节,int是一种常用的数据类型,用于表示整数,需要根据具体情况选择合适的数据类型,以确保程序的正确性和性能。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    544

    2024.08.29

    c++怎么把double转成int
    c++怎么把double转成int

    本专题整合了 c++ double相关教程,阅读专题下面的文章了解更多详细内容。

    113

    2025.08.29

    C++中int的含义
    C++中int的含义

    本专题整合了C++中int相关内容,阅读专题下面的文章了解更多详细内容。

    200

    2025.08.29

    CSS position定位有几种方式
    CSS position定位有几种方式

    有4种,分别是静态定位、相对定位、绝对定位和固定定位。更多关于CSS position定位有几种方式的内容,可以访问下面的文章。

    81

    2023.11.23

    html边框设置教程
    html边框设置教程

    本教程将带你全面掌握HTML/CSS边框设置,从基础的border属性讲起,涵盖所有边框样式、圆角设置及高级技巧,帮助你快速上手实现各种边框效果。

    36

    2025.09.02

    http500解决方法
    http500解决方法

    http500解决方法有检查服务器日志、检查代码错误、检查服务器配置、检查文件和目录权限、检查资源不足、更新软件版本、重启服务器或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    427

    2023.11.09

    java 字符串格式化
    java 字符串格式化

    本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

    0

    2026.01.30

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Sass 教程
    Sass 教程

    共14课时 | 0.8万人学习

    Bootstrap 5教程
    Bootstrap 5教程

    共46课时 | 3.1万人学习

    CSS教程
    CSS教程

    共754课时 | 25.1万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号