本文介绍如何在 HTML 表单中实现“输入框必须从动态过滤的 <ul> 列表中选择值”的强约束验证，避免用户手动输入无效内容，并在失焦时智能判断是否完成合法选择，提升数据准确性和用户体验。
本文介绍如何在 html 表单中实现“输入框必须从动态过滤的 `
- ` 列表中选择值”的强约束验证，避免用户手动输入无效内容，并在失焦时智能判断是否完成合法选择，提升数据准确性和用户体验。
在构建数据敏感型表单（如工单系统、任务登记页）时，常需确保关键字段（如 ordernumber）的值严格来自预定义选项集——而非允许自由输入。典型场景是：用户在输入框中键入前缀（如 mee），下方实时展示匹配项 <ul><li>MEETINGS</li><li>MEDICAL</li></ul>，但若用户直接跳转到下一字段（如 notes），而未点击任一 <li>，则应即时拦截并提示补选。
这并非简单 onBlur 校验，而是需解决事件竞态问题：当用户点击列表项时，input 会先触发 blur，随后才执行 li.click() 设置值。若立即在 blur 中校验，此时 input.value 尚未更新，误判为“未选择”。
✅ 正确逻辑如下：
- 显示阶段：监听 input 的 input 事件，根据输入内容动态过滤并显示 <ul>；
- 选择阶段：为每个 <li> 绑定点击事件，将文本/值写入 input 并清空列表；
- 验证阶段：在 input 的 blur 事件中，使用 setTimeout(..., 0) 延迟执行校验，确保 DOM 更新完成；
- 校验规则：检查 input.value 是否存在于原始选项数组（或 <ul> 中所有 <li> 的文本/data-value）；若不匹配，弹出提示、恢复焦点并阻止后续操作。
以下是可直接集成的完整示例代码（含 HTML 结构与 JS 逻辑）：
立即学习“前端免费学习笔记（深入）”；
<form id="taskForm"> <input type="text" id="myInput" placeholder="输入订单号..." /> <ul id="myUL" style="display:none; border:1px solid #ccc; max-height:200px; overflow-y:auto;"></ul> <input type="text" id="name" placeholder="姓名" /> <textarea id="notes" placeholder="备注"></textarea> <button type="submit">提交</button> </form>
document.addEventListener('DOMContentLoaded', () => {
const input = document.getElementById('myInput');
const list = document.getElementById('myUL');
const notes = document.getElementById('notes');
const allOptions = ['MEETINGS', 'MEDICAL', 'MAINTENANCE', 'EMERGENCY']; // 真实数据源
// 动态过滤并渲染列表
input.addEventListener('input', () => {
const value = input.value.trim().toUpperCase();
list.innerHTML = '';
if (!value) {
list.style.display = 'none';
return;
}
const matches = allOptions.filter(opt => opt.includes(value));
if (matches.length > 0) {
matches.forEach(opt => {
const li = document.createElement('li');
li.textContent = opt;
li.dataset.value = opt; // 存储标准值，避免文本格式差异
li.addEventListener('click', () => {
input.value = opt;
list.style.display = 'none';
});
list.appendChild(li);
});
list.style.display = 'block';
} else {
list.style.display = 'none';
}
});
// 失焦时延迟校验（关键！）
input.addEventListener('blur', () => {
setTimeout(() => {
const currentValue = input.value.trim();
const isValid = allOptions.some(opt => opt === currentValue);
if (!isValid && currentValue !== '') {
alert('请从下拉列表中选择有效订单号！');
input.focus();
}
}, 0);
});
// 点击外部区域时隐藏列表（增强体验）
document.addEventListener('click', (e) => {
if (!e.target.closest('#myInput') && !e.target.closest('#myUL')) {
list.style.display = 'none';
}
});
// 提交前二次校验（兜底）
document.getElementById('taskForm').addEventListener('submit', (e) => {
if (!allOptions.includes(input.value.trim())) {
e.preventDefault();
alert('订单号无效，请重新选择。');
input.focus();
}
});
});⚠️ 注意事项：
- 勿依赖 window.getComputedStyle(...).display 判断列表状态：CSS 层叠可能导致误判，应以 list.style.display 或自定义布尔标志（如 isDropdownOpen = true/false）为准；
- data-value 优于 textContent：若列表项含 HTML 标签或格式化文本（如 <li><strong>MEETINGS</strong> (Active)</li>），务必用 data-value 存储标准化值；
- 移动端兼容性：blur 在 iOS Safari 中行为略有差异，建议额外监听 touchend 并结合 focusout 事件；
- 无障碍支持：为 <ul> 添加 role="listbox"，为 <li> 添加 role="option" 和 aria-selected，并支持键盘导航（↑↓+Enter）。
该方案本质是实现一种轻量级的 “受控自动完成（Controlled Autocomplete）”，核心在于通过事件时序控制（setTimeout(0)）打破 DOM 更新与事件处理的竞态，确保校验逻辑始终基于最终状态。它比纯服务端校验更及时，比强制 required 属性更灵活，是专业表单交互设计的关键实践之一。
