HTML下拉选择标签怎么实现带搜索过滤功能的下拉选择-H5教程-PHP中文网

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

html下拉选择标签怎么实现带搜索过滤功能的下拉选择

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

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

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

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

关键 HTML 结构示例

保留语义化原生 <select></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 即可完成搜索匹配：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

对每个 <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>