直接套用 input-group + dropdown 会错位，因 input-group 的 flex 布局干扰 dropdown-menu 的绝对定位；须将 dropdown 容器与 input-group 设为同级兄弟，并用 position-relative 包裹以确保正确定位上下文。
为什么直接套用 input-group + dropdown 会错位
Bootstrap 的 input-group 默认对子元素做 flex 布局并强制设置 flex: 1 1 auto，而 dropdown-menu 是绝对定位的块级容器——两者叠加时，dropdown-menu 的定位参考点会被 input-group 的 flex 容器干扰，导致下拉框偏移、宽度异常或无法触发 hover/focus。
关键不是“能不能套”，而是得切断 input-group 对下拉菜单父容器的布局影响。
- 把
dropdown容器（即带dropdownclass 的父 div）**脱离 input-group 的 flex 流**：不把它作为input-group的直接子项 -
dropdown-menu必须挂载在dropdown容器内部，且该容器需有position: relative（Bootstrap 5 默认已设） - 搜索
input本身保留在input-group内，但下拉触发按钮和菜单要另起一层结构
正确 DOM 结构：分离 input-group 与 dropdown 容器
不能写成：<div class="input-group"><div class="dropdown">...</div></div>。必须让 dropdown 和 input-group 是同级兄弟，再用 CSS 或 wrapper 控制视觉对齐。
推荐结构（Bootstrap 5.3+）：
立即学习“前端免费学习笔记（深入）”；
<div class="position-relative d-inline-block">
<div class="input-group">
<input type="text" class="form-control" placeholder="搜索选项..." aria-label="Search">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
</button>
</div>
<!-- dropdown-menu 挂在同级 wrapper 下，避免被 input-group flex 影响 -->
<ul class="dropdown-menu position-absolute w-100 mt-1">
<li><a class="dropdown-item" href="#">选项一</a></li>
<li><a class="dropdown-item" href="#">选项二</a></li>
</ul>
</div>-
position-relative d-inline-block确保下拉菜单能以该 wrapper 为定位上下文 -
w-100 mt-1让菜单宽度匹配 input，且留出 0.25rem 间距（避免遮挡 input border） - 按钮用
dropdown-toggle但不包裹在dropdownclass 容器里——靠data-bs-toggle="dropdown"和手动指定dropdown-menu关联
搜索交互：用 JS 过滤 dropdown-item 而非重写整个菜单
原生 Bootstrap dropdown 不支持搜索过滤，得自己监听 input 的 input 事件。重点不是“加功能”，而是避免重复渲染或丢失焦点。
- 只对
.dropdown-item做display: none/block切换，不销毁/重建 DOM —— 否则focus会丢失，键盘导航失效 - 过滤时忽略大小写：
itemText.toLowerCase().includes(query.toLowerCase()) - 没匹配项时显示「无结果」
<li class="dropdown-item disabled text-muted">无匹配项</li>，别用visibility: hidden，否则 screen reader 读不到 - 清空输入框后，恢复所有
.dropdown-item的可见性（记得同时移除「无结果」项）
示例逻辑片段：
const searchInput = document.querySelector('.form-control');
const items = document.querySelectorAll('.dropdown-item:not(.disabled)');
searchInput.addEventListener('input', () => {
const query = searchInput.value.trim();
items.forEach(item => {
const text = item.textContent || item.innerText;
item.style.display = query ? (text.toLowerCase().includes(query.toLowerCase()) ? 'block' : 'none') : 'block';
});
});移动端点击穿透与 focus 失效问题
在 iOS Safari 或部分安卓 WebView 中，点击下拉按钮后菜单闪现即收，本质是 click 触发了 toggle，但紧接着 focus 又让 input 获取焦点，触发了 blur 事件，导致菜单关闭。
- 给按钮加
data-bs-auto-close="outside"，防止点击菜单外部自动关闭时误判 - 禁止按钮默认聚焦：
button.setAttribute('tabindex', '-1')，让焦点始终落在 input 上 - 监听
shown.bs.dropdown事件后，手动searchInput.focus()，确保键盘可操作 - 如果用
dropdown-menu内部的input（比如搜索框放菜单里），必须加event.stopPropagation()在其click事件中，否则点击它也会触发 menu hide
这个环节最容易被忽略：不是样式问题，是事件流没理清。一旦 focus 来回切换失控，整个交互就不可用。
