HTML原生<select>不支持搜索，需改用自定义组件；推荐choices.js库，它基于原生<select>增强，支持搜索/多选/异步加载，且保持语义化和表单兼容性。
HTML原生
原生 <select> 标签在所有浏览器里都不提供内置搜索功能，用户只能滚动或用键盘逐项匹配（按字母跳转），无法输入关键词过滤选项。想实现“下拉框 + 搜索筛选”，本质是放弃原生 <select>，改用可编辑的自定义组件。
推荐用 autocomplete 类库替代，比如 choices.js
choices.js 是轻量、无依赖、支持搜索/多选/异步加载的下拉增强库，适配性好，比手写 DOM 逻辑更稳。它把 <select> 或 <input> 转成带搜索框的下拉面板，保留语义化结构，表单提交也不受影响。
使用要点：
- 页面中仍写原生
<select>（含<option>），choices.js会自动接管并隐藏原生元素 - 初始化时传入
searchEnabled: true（默认就是true） - 若需模糊匹配（如搜“北”出“北京”“北海”），得配合
searchChoices: false+ 自定义shouldSort: false和排序逻辑，但通常默认精确前缀匹配已够用 - 注意：如果
<select>动态更新了<option>，要调用instance.setChoices()刷新，不能只改 DOM
const element = document.querySelector('#my-select');
const choices = new Choices(element, {
searchEnabled: true,
itemSelectText: '',
noResultsText: '没找到',
});
不用第三方库？可用 <datalist> 模拟，但限制极多
<datalist> 是 HTML5 原生标签，配合 <input list="xxx"> 可实现输入时下拉提示，但它不是下拉选择器——没有点击展开动作、不阻止非法输入、不支持禁用选项、无法控制样式或事件流。
立即学习“前端免费学习笔记（深入）”；
常见误用现象：
- 用户输完直接回车，值可能不在
<datalist>中，后端得做容错校验 - 没法区分“用户选择了某项”和“用户手动输入了相同文字”，
change和input事件行为不一致 - Chrome 下
<datalist>选项不支持disabled属性，Firefox 表现又不同 - 无法设置 placeholder 在下拉展开时消失，视觉混乱
<input list="browsers" name="browser" id="browser"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> </datalist>
自己封装需重点处理的三个边界
若团队要求完全自研（比如合规或包体积限制），核心要堵住三个漏点：
-
焦点管理：点击输入框要展开面板；点击面板外区域或按
Esc必须收起；Tab键需在输入框 ↔ 面板选项间正确流转，且不能跳出整个组件 -
键盘操作兼容性：方向键上下移动高亮项，
Enter或Space确认，Backspace删除字符后重新匹配（不是清空再搜） - 搜索逻辑一致性：大小写是否敏感（建议忽略）、是否分词（如“上海 浦东”搜“浦东”应命中）、中文拼音首字母是否支持（需额外引入拼音库）
这些细节在 choices.js 或 select2 里都已打磨多年，重复造轮子成本远高于引入一个 10KB 的 ES module。
