input type="search"本身不支持实时搜索，仅是语义化标签；实时搜索必须监听input事件（非change），并配合防抖、abortcontroller中断请求及错误处理。
input type="search" 本身不支持实时搜索——它只是个语义化输入框，和 type="text" 行为完全一致。
为什么监听 input 事件而不是 change
用户每按一个键、粘贴一段文字、甚至用输入法选字时，input 事件都会立即触发；而 change 只在失焦后才触发一次，根本无法满足“边输边搜”的需求。
- 移动端软键盘回车、长按粘贴、中文拼音上屏，都靠
input捕获 - 若误用
change，用户输完直接点搜索按钮前，根本不会触发任何逻辑 - 部分浏览器对
onchange在contenteditable或动态插入内容时行为不一致，input更可靠
防抖不是可选项，是必选项
不加防抖，用户输入 “react” 会发出 5 次请求：r → re → rec → reac → react。后端可能被压垮，前端还容易出现旧响应覆盖新结果的问题。
- 推荐延迟 250–400ms，太短起不到节流作用，太长会让用户感觉卡顿
- 每次新输入必须先
clearTimeout(debounceTimer)，再设新定时器 - 别把防抖函数写成全局
debounce(fn, ms)后直接传给事件——要确保fn内能正确读取当前input.value，否则可能取到旧值
AbortController 是防止“结果错乱”的关键
用户快速输入时，前一个 fetch 请求还没返回，后一个已发出。若旧请求后到，它可能把本该隐藏的结果又刷出来。
- 每次发起新请求前，先调用
abortController.abort()（如果存在） - 然后新建
const abortController = new AbortController()，传入fetch(..., { signal: abortController.signal }) - 注意捕获
AbortError：不是所有错误都要提示用户，“被取消”就该静默处理 - 别忘了在组件卸载或输入框销毁时手动
abort()，避免内存泄漏
真正难的不是写几行 addEventListener，而是让每一次输入变化都对应一次干净、可控、可中断、有反馈的请求生命周期。HTML 标签只管画框，JS 才管呼吸节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
