html 的 仅提供语义化与移动端优化，无实时搜索功能；实时搜索需 javascript 监听 input 事件、手动实现防抖、请求中断、加载状态与错误处理。
HTML 本身不提供实时搜索能力，<input type="search"> 只是语义化标签，不触发自动请求或监听输入变化。
实时搜索靠 JavaScript 监听，不是靠 HTML 标签
很多人误以为用了 <input type="search"> 就能“实时搜索”，其实它和 <input type="text"> 在行为上完全一致——除非你手动加 JS 逻辑。浏览器不会因为类型是 search 就自动发请求、防抖、或调接口。
- 必须用
addEventListener("input", ...)或oninput监听值变化（change不行，它只在失焦时触发） - 需要自己实现防抖（debounce），否则每按一个键都可能发请求，压垮后端或卡 UI
- 要考虑空值、空白字符、编码（如中文、特殊符号）是否要 encode 后传给后端
input[type="search"] 的实际作用只有三个
它不是功能开关，而是可访问性与平台行为的提示：
- 在 iOS/Android 上可能唤起带「X」清除按钮和「搜索」软键盘（但不保证，取决于 UA 和系统版本）
- 支持
results和autosave属性（已基本被弃用，现代浏览器忽略） - 对屏幕阅读器更友好，语义上表明这是搜索意图，而非普通文本输入
如果你不关心无障碍或移动端软键盘优化，用 type="text" 完全没问题，功能上零差异。
常见踩坑：监听了 input 却没处理 loading 状态或错误边界
实时搜索最容易被忽略的是用户交互反馈。没有 loading 指示、没禁用重复点击、搜索失败后没清空旧结果，都会导致体验断裂：
- 建议在发起请求前设
disabled = true或加 loading class 到按钮/输入框 - 用
AbortController中断上一次未完成的请求（尤其防抖中旧请求还在跑，新请求已发出） - 网络错误或 4xx/5xx 响应时，别静默吞掉——至少显示一条轻量提示，比如
搜索失败，请重试 - 服务端返回空数组 ≠ 搜索无结果，要区分「无匹配」和「请求失败」
实时搜索真正的复杂点不在 HTML 结构，而在请求调度、状态同步和中断控制。哪怕只做本地数组过滤，也要考虑输入过快时的渲染节奏；一旦涉及网络，fetch + AbortController + 防抖就是绕不开的组合。别指望一个 type 属性替你扛这些事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
