原生 HTML 的 <select> 不支持搜索，需用 <div>+<input>+<ul> 模拟并绑定 JS 过滤逻辑，隐藏原生 select 以保语义与无障碍；推荐 Choices.js 等成熟库实现。

原生 HTML 的 <select> 标签本身不支持搜索过滤功能。要实现“带搜索的下拉选择”，需借助 JavaScript（或第三方库）模拟增强行为，常见做法是用 <div> + <input> + <ul> 组合替代原生下拉，并动态筛选选项。

用原生 HTML + JS 实现简易可搜索下拉

核心思路：隐藏原生 <select>，用自定义结构展示并绑定搜索逻辑。

• 用一个 <div class="search-select"> 包裹搜索框和选项列表
• 在 <input type="text"> 中监听 input 事件，实时过滤 <ul> 中的 <li>
• 点击 <li> 后，同步更新隐藏的原生 <select> 和显示文本
• 点击外部区域或按 Esc 键时关闭下拉面板

关键 HTML 结构示例

保留语义化原生 <select> 便于表单提交和无障碍访问，仅用于数据同步：

<div class="search-select">
  <input type="text" placeholder="搜索选项..." autocomplete="off">
  <ul>
    <li data-value="1">苹果</li>
    <li data-value="2">香蕉</li>
    <li data-value="3">橙子</li>
  </ul>
  <select style="display:none">
    <option value="">请选择</option>
    <option value="1">苹果</option>
    <option value="2">香蕉</option>
    <option value="3">橙子</option>
  </select>
</div>

基础 JS 过滤逻辑（无依赖）

只需几行 JS 即可完成搜索匹配：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 对每个 <li> 的文本内容（textContent）做 includes() 或 indexOf() 判断
• 匹配则 li.style.display = 'block'，否则设为 'none'
• 注意大小写处理：可用 toLowerCase() 统一比较
• 搜索框为空时，恢复所有 <li> 显示

更推荐使用成熟方案

生产环境建议用轻量库避免兼容性和交互细节问题：

• Select2（jQuery 依赖）：功能全、主题丰富、支持远程加载
• Choices.js（纯 JS，无依赖）：现代 API、支持多选/禁用项/键盘导航
• Tom Select（Select2 衍生版）：体积小、TypeScript 支持好、插件生态强

例如引入 Choices.js 只需三行代码即可启用搜索：

<link rel="stylesheet" href="choices.min.css">
<script src="choices.min.js"></script>
<select class="js-choice">...</select>
<script>new Choices('.js-choice', { searchEnabled: true });</script>