bootstrap 4 原生不支持带搜索框的下拉菜单，必须手动在.dropdown-menu内嵌入并处理事件冒泡、焦点管理、实时过滤及popper定位协调；直接插入会导致错位、闪退和键盘导航失效。
Bootstrap 4 原生不支持带搜索框的下拉菜单，dropdown 组件本身没有内置搜索逻辑或输入控件 —— 你必须手动添加 <input> 并自己处理过滤逻辑。
为什么不能直接用 dropdown-menu 套搜索框？
因为 .dropdown-menu 默认使用 position: absolute + transform: translate() 定位（由 Popper.js 控制），而 <input> 插入其中会破坏高度计算、焦点行为和滚动逻辑。常见错误包括：
- 搜索框被遮挡或错位（尤其在
dropup或dropright场景） - 点击输入框时菜单意外关闭（
data-toggle="dropdown"拦截了 focus 事件） - 键盘操作（如上下键）无法聚焦到输入框，而是直接跳菜单项
如何让 <input> 真正嵌入下拉并可交互？
核心是绕过 data-toggle="dropdown" 的自动关闭机制，改用 JS 手动控制展开/收起，并把 <input> 放在 .dropdown-menu 内部最顶部，同时重置部分样式：
- 给
<input>添加class="form-control form-control-sm"，并设置margin: 0.25rem避免紧贴边框 - 在
.dropdown-menu上加padding-top: 0，否则默认内边距会让输入框和第一项之间留白过大 - 用
$('.dropdown').on('hide.bs.dropdown', function (e) { if ($(e.target).find('input:focus').length) e.preventDefault(); })阻止失焦时自动关闭 - 用
$('.dropdown-menu input')的keyup事件过滤.dropdown-item的显隐（注意：只 hide，别 remove，否则影响 Popper 重新定位）
dropdown-item 过滤时容易忽略的 DOM 结构问题
Bootstrap 4 的 .dropdown-item 通常是 <a></a> 标签，但如果你混用 <button></button> 或自定义元素，display: none 可能导致高度塌陷、Popper 重新计算位置失败。稳妥做法是：
- 统一用
<a href="#" class="dropdown-item"></a>作为选项容器 - 过滤时只加
style="display:none"，不要移除dropdown-item类 - 如果选项含图标或 badge，确保它们也随父级一起隐藏（避免残留）
- 空结果时，建议插入一个
<div class="dropdown-item text-muted">无匹配项</div>占位，否则菜单高度可能坍缩为 0
真正麻烦的不是写 CSS，而是协调 Popper 的定位更新、输入焦点管理、键盘导航（Tab / Esc / ArrowUp/Down）和无障碍属性（aria-activedescendant）。简单场景够用，复杂表单建议换用 select2 或 choices.js 这类专为搜索优化的库。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
