应使用 compositionstart 和 compositionend 事件识别中文输入法组合完成时机，在 compositionend 后执行搜索，避免 input 事件频繁触发；同时为非输入法场景添加防抖、inputType 判断及移动端降级方案。
在中文输入法环境下，用户每敲一个拼音字母，输入法会动态候选汉字，但浏览器默认会在每次按键（包括拼音输入过程）都触发 input 事件，导致搜索逻辑频繁执行、请求堆积、响应卡顿甚至误搜。使用 compositionstart 和配套事件能准确识别“真正输入完成”的时机，从而把搜索延迟到用户选字结束之后，大幅提升体验和性能。
识别输入法组合过程的三个关键事件
中文输入（如拼音、五笔）在浏览器中会经历“开始组合 → 组合中 → 组合结束”三个阶段，对应原生事件：
-
compositionstart：用户按下第一个拼音字母（如按
h），输入法开始进入编辑状态，此时input值可能是空或暂存拼音（如"h"），但尚未上屏； -
compositionupdate（可选监听）：拼音持续输入或候选框变化时触发（如从
"h"变成"ha"），但内容仍未确认； -
compositionend：用户点击候选词、按空格/回车确认，或直接用鼠标点击上屏后触发，此时
event.data包含最终插入的文本（如"哈"），input元素的value也已更新为真实汉字。
只在 compositionend 后执行搜索请求
核心策略是：禁用输入过程中所有 input 事件的搜索逻辑，仅在 compositionend 触发时做一次干净的搜索。示例代码：
const searchInput = document.getElementById('search');
let isComposing = false;
searchInput.addEventListener('compositionstart', () => {
isComposing = true;
});
searchInput.addEventListener('compositionend', (e) => {
isComposing = false;
// 此时 value 已是最终汉字，可安全搜索
performSearch(searchInput.value);
});
searchInput.addEventListener('input', () => {
// 忽略输入法组合期间的 input 触发
if (isComposing) return;
// 非中文输入（如英文、粘贴）可立即搜索
performSearch(searchInput.value);
});
兼顾非输入法场景与防抖优化
单纯依赖 compositionend 不能覆盖所有情况（如英文直输、粘贴、语音输入）。建议组合以下做法：
- 对
input事件加轻量级防抖（如 300ms），避免快速连打触发多次请求； - 检测
event.inputType，若为'insertFromPaste'或'insertText'且非组合中，立即搜索； - 清空搜索框时（
value === ''），可立即清空结果，无需等待compositionend； - 移动端需注意：部分安卓 WebView 对
composition事件支持不全，可 fallback 到监听input+ 简单拼音正则判断（如/^[a-z\u00E0-\u00FC]+$/i.test(value)）来粗略区分是否还在拼音阶段。
避免常见陷阱
几个容易出错的细节：
-
compositionstart不代表一定有compositionend（如用户切换焦点、关闭输入法），所以不要依赖它“配对清理”； - 不要在
compositionstart中清空搜索结果——用户可能只是临时切走，回来还要继续输入； -
compositionend的e.data是插入的文本，但input.value才是完整当前值（尤其存在光标前/后已有文字时），应以value为准； - 不要用
setTimeout模拟“等输入完成”，既不可靠又难维护，原生事件才是标准解法。
