需用oninput监听并配合防抖、abortcontroller及长度校验才能实现真正实时搜索，onchange和onkeyup均不适用。
HTML原生的<input type="search">本身不带实时搜索能力，它只是个语义化输入框，触发实时搜索必须靠JavaScript手动监听事件。
为什么input的oninput比onchange更适合实时搜索
onchange只在输入框失焦或回车时触发，完全不符合“边打边搜”的需求；oninput则在每次输入、粘贴、删除时都立即触发，响应及时。
- 移动端软键盘输入、长按删除、自动补全等操作都会触发
oninput，但不会触发onchange -
oninput兼容所有现代浏览器（包括IE9+），无需polyfill - 注意：不要用
onkeyup——用户长按按键会连续触发，且无法捕获粘贴和语音输入
防抖（debounce）不是可选项，是必选项
用户每敲一个键就发一次请求，不仅浪费资源，还可能因响应延迟导致结果错乱（比如“react”还没返回，“reactive”请求又发出去了）。
- 推荐使用
setTimeout+clearTimeout实现简易防抖，延迟300–500ms再执行搜索逻辑 - 防抖函数里必须清空上一次的定时器，否则旧请求结果可能覆盖新请求结果
- 搜索框为空时，建议主动清空结果列表，而不是等接口返回空数组
如何让input真正支持“实时”且不卡顿
光有事件监听和防抖还不够，DOM更新和请求管理也得配合：
- 避免在
oninput回调里直接调用fetch——应先判断输入长度（比如≥2才发起请求） - 用
AbortController中止上一个未完成的请求，防止旧响应覆盖新结果（尤其在慢网或后端响应不稳定时） - 给搜索框加
autocomplete="off"和spellcheck="false"，减少浏览器干预带来的意外行为 - 移动端需额外监听
search事件（软键盘搜索按钮），与oninput逻辑合并处理
真正难的不是监听输入，而是控制请求节奏、处理竞态、兼顾输入体验和网络容错。漏掉其中任一环，所谓的“实时”就会变成卡顿、错乱或白屏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
