如何实现Bootstrap带搜索框的下拉菜单_组合input-group与dropdown的CSS-css教程-PHP中文网

直接套用 input-group + dropdown 会错位，因 input-group 的 flex 布局干扰 dropdown-menu 的绝对定位；须将 dropdown 容器与 input-group 设为同级兄弟，并用 position-relative 包裹以确保正确定位上下文。

如何实现bootstrap带搜索框的下拉菜单_组合input-group与dropdown的css

为什么直接套用 `input-group` + `dropdown` 会错位

Bootstrap 的 input-group 默认对子元素做 flex 布局并强制设置 flex: 1 1 auto，而 dropdown-menu 是绝对定位的块级容器——两者叠加时，dropdown-menu 的定位参考点会被 input-group 的 flex 容器干扰，导致下拉框偏移、宽度异常或无法触发 hover/focus。

关键不是“能不能套”，而是得切断 input-group 对下拉菜单父容器的布局影响。

把 dropdown 容器（即带 dropdown class 的父 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 但不包裹在 dropdown class 容器里——靠 data-bs-toggle="dropdown" 和手动指定 dropdown-menu 关联

搜索交互：用 JS 过滤 `dropdown-item` 而非重写整个菜单

原生 Bootstrap dropdown 不支持搜索过滤，得自己监听 input 的 input 事件。重点不是“加功能”，而是避免重复渲染或丢失焦点。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

只对 .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