本文介绍一种前端表单验证模式：当用户在输入框中键入内容触发动态 <ul> 下拉建议列表后，必须从中选择一项，禁止直接提交未匹配的自由文本，通过 blur + setTimeout 避免事件竞态，并自动聚焦回输入框引导修正。
本文介绍一种前端表单验证模式：当用户在输入框中键入内容触发动态 `
- ` 下拉建议列表后，必须从中选择一项，禁止直接提交未匹配的自由文本，通过 `blur` + `settimeout` 避免事件竞态，并自动聚焦回输入框引导修正。
- 用户键入时 → 动态展示过滤后的 <ul> 列表（如输入 mee 显示 MEETINGS）；
- 用户点击列表项 → 立即将该项文本赋值给输入框，并隐去列表；
- 用户离开输入框（blur）→ 延迟检查当前值是否真实存在于可选项中（而非手输的无效字符串），若不匹配则报错并重新聚焦。
实现“必选建议项”校验的核心逻辑在于分离用户意图与输入状态：
关键难点在于 blur 事件与列表项点击的执行顺序冲突：点击 <li> 会先触发 blur，此时输入框值尚未更新（因点击处理逻辑可能滞后），导致误判为“未选择”。解决方案是使用 setTimeout(..., 0) 将校验逻辑推入下一个事件循环，确保 DOM 更新和值赋值已完成：
const input = document.getElementById('myInput');
const list = document.getElementById('myUL');
const items = list.querySelectorAll('li');
// 点击列表项：同步设置输入值并隐藏列表
items.forEach(item => {
item.addEventListener('click', () => {
input.value = item.textContent.trim();
list.style.display = 'none';
});
});
// blur 时延迟校验（避免竞态）
input.addEventListener('blur', () => {
setTimeout(() => {
const currentValue = input.value.trim();
const validOptions = Array.from(items).map(li => li.textContent.trim());
if (!validOptions.includes(currentValue)) {
alert('请从下拉列表中选择有效订单号，不可手动输入！');
input.focus();
input.select(); // 可选：高亮现有内容便于重选
}
}, 0);
});⚠️ 注意事项：
- 不要依赖 onfocus 或 onchange：focus 无法捕获“离开时未选择”的场景；change 仅在值真正改变且失焦后触发，但无法区分是手输还是选择所致。
- 校验必须基于真实可选项集合：建议将合法值存于数组或 data-value 属性中，避免仅依赖 textContent（易受空格、格式影响）。
- 增强体验：可添加视觉反馈（如输入框边框变红）、禁用提交按钮，或在输入框下方显示实时提示（如“请选择：MEETINGS, MAINTENANCE...”）。
- 多字段扩展：若需对多个字段（如 dateworked、hours）应用相同逻辑，应封装为可复用函数，传入 inputEl、listEl 和 optionsArray 参数。
该模式在业内常称为 “autocomplete-enforced selection” 或 “strict suggestion binding”，本质是将自由输入框升级为受控的“伪下拉组件”，兼顾搜索效率与数据一致性，是企业级表单中保障主数据准确性的常用实践。
