原生不支持输入检索，仅适合建议输入而非强制选择，因其无法约束输入值、兼容性差；需用+组合并js接管过滤与选中逻辑。
原生 <select></select> 不支持输入检索，强行用 <datalist></datalist> 又没法约束输入值合法性、兼容性差，真要实现「输入即筛选+强制选中」，必须自己接管交互逻辑。
为什么不能直接用 <datalist></datalist> 做下拉搜索
<datalist></datalist> 本质是输入框的提示补全，不是选择控件：用户输错内容也能提交，value 不受 <option></option> 约束；IE 全系不支持；iOS Safari 直到 12.2 才可用；移动端点击选项后光标常卡在输入框里不收起。它只适合“建议输入”，不适合“必须从列表中选”的业务场景。
用 <input> + <select></select> 组合实现可控检索
核心是把 <select></select> 隐藏，用 <input> 接收输入，再用 JS 控制 <select></select> 的 option 显示/隐藏和 selected 状态：
- 监听
input事件（不是change），实时触发过滤 - 遍历
<select></select>下所有option:not([disabled])，比对textContent或value - 匹配项设
style.display = ""，不匹配项设style.display = "none" - 找到首个匹配项后，主动执行
selectEl.value = matchedOption.value并触发change事件 - 记得在用户失焦（
blur）时兜底：若输入无匹配，清空input值或还原上一个有效值
表格内每行带 <select></select> 时的过滤陷阱
如果下拉框在 DataTable 表格单元格里，别指望全局搜索框能识别它的当前选中值——默认只搜 HTML 源码里的静态文本（比如 <select></select> 字符串本身）。必须单独处理：
- 给所有下拉框加统一 class，如
class="row-status-select" - 初始化 DataTable 后，用
$('.row-status-select').on('change', ...)绑定事件 - 在回调里用
$(this).closest('tr')定位所在行，再调用table.row(...).invalidate().draw(false) - 或者更轻量：对目标列调用
table.column(n).search($(this).val()).draw()，n 是列索引 - 避免用事件委托监听
tbody，容易因 event.target 错位导致改错行
移动端适配和可访问性绕不开的点
原生 <select></select> 在 iOS/Android 上会唤起系统选择器，跟自定义搜索逻辑冲突。折中方案是：
- PC 端用
<input>+ 隐藏<select></select>实现搜索；移动端检测navigator.userAgent匹配iOS|Android后，直接显示原生<select></select>（放弃搜索，保功能） - 所有动态显示的
<option></option>必须保留role="option"和aria-selected属性，否则屏幕阅读器无法识别状态 - 键盘操作要支持
Enter确认、Escape收起、ArrowDown/Up切换高亮项
最易被忽略的是 value 和 text 的语义分离：后端通常只认 value（比如 "active"），但用户搜的是中文“启用”。过滤时得同时比对 option.textContent 和映射关系，不能只靠 value.indexOf()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
