应在 compositionend 中执行最终搜索，而非仅依赖 input 事件；需结合 isComposing 状态、值非空判断及防抖处理，兼顾中文上屏确认与英文/粘贴等非组合输入场景。
在中文输入法环境下，用户输入搜索关键词时，往往先触发 compositionstart（开始组合），中间经历多次 input（但此时值可能是不完整的拼音或候选词），最后在用户确认输入（如按空格、回车或选字）后触发 compositionend。这时 DOM 中的 input.value 才是最终确定的文本。因此，**应在 compositionend 中执行最终搜索，而非仅依赖 input 事件**，避免拼音未上屏就误搜。
监听 compositionend 并区分有效输入
仅监听 compositionend 不够——它会在每次中文输入完成时触发，包括空输入（如只打拼音又删除）、或用户只是切换输入法。需结合状态判断是否值得发起搜索：
- 用布尔标志
isComposing跟踪是否处于输入法组合状态（在compositionstart设为true，compositionend设为false） - 在
compositionend回调中，检查event.target.value.trim()是否非空，且!isComposing（确保不是嵌套触发） - 可选：对比前后值，避免重复提交相同关键词
与 input 事件协同，兼顾非输入法场景
用户也可能直接粘贴文字、用英文输入、或点击清空按钮。因此不能只靠 compositionend：
- 仍需监听
input事件，但只在!isComposing时才立即触发搜索（即非中文输入法状态下） -
compositionend则专用于“中文上屏完成”的时机，此时无论之前有没有 input 触发，都以它为准做最终查询 - 这样覆盖了所有主流输入方式：英文直输、粘贴、语音转文字、中文选词确认等
防抖 + 确认时机，避免高频误触
即使逻辑正确，用户快速连续输入（如连打多个字再确认）可能导致多次 compositionend。建议加简单防抖：
立即学习“Java免费学习笔记（深入）”；
- 在
compositionend中清除上一次定时器，设置新的延迟（如 100ms）再执行搜索 - 延迟足够短，不影响体验；又能合并短时间内多次上屏（例如用户删改后重选词）
- 注意：不要防抖
input事件本身，否则英文输入会卡顿；只对最终确认逻辑（即compositionend后的动作）防抖
示例代码结构
关键逻辑示意（不依赖框架）：
let isComposing = false;
let searchTimer = null;
inputEl.addEventListener('compositionstart', () => {
isComposing = true;
});
inputEl.addEventListener('compositionend', () => {
isComposing = false;
clearTimeout(searchTimer);
const query = inputEl.value.trim();
if (query) {
searchTimer = setTimeout(() => doSearch(query), 100);
}
});
inputEl.addEventListener('input', () => {
if (!isComposing) {
const query = inputEl.value.trim();
if (query) {
doSearch(query); // 英文/粘贴等场景立即搜
} else {
clearResults(); // 清空结果
}
}
});
