Bootstrap如何实现响应式的带有搜索功能的动态侧边菜单-Bootstrap教程-PHP中文网

搜索框必须置于offcanvas-body内而非navbar-collapse中，使用form-control-sm确保高度一致，通过display切换过滤菜单项，聚焦时自动收起offcanvas以适配移动端。

搜索框必须塞进 offcanvas 内部，不能放 navbar-collapse 里

侧边菜单用的是 offcanvas，不是 navbar-collapse。把搜索框硬塞进 navbar 的折叠逻辑里，小屏下它要么消失、要么错位——因为 navbar-collapse 只管顶部导航的显隐，和侧边栏完全无关。

正确位置是：在 offcanvas 的 offcanvas-body 里，作为独立 form 放最顶部或固定区域。示例结构：

<div class="offcanvas offcanvas-start" id="sidebar">
  <div class="offcanvas-header">...</div>
  <div class="offcanvas-body">
    <form class="mb-3">
      <input class="form-control form-control-sm" type="search" placeholder="Search menu...">
</form>
    <ul class="nav flex-column">...</ul>
</div>
</div>

form-control-sm 是必须的——不加会比侧边栏其他文字高，视觉割裂
别套 input-group，它自带 padding/margin，和 offcanvas-body 的内边距叠加后容易撑出容器
搜索框后面紧接 nav 列表，中间用 mb-3 隔开，避免滚动时输入框被菜单项遮挡

动态过滤菜单项时，别删 DOM，用 display: none 切换

用户输入关键词后，你要实时匹配并隐藏不相关项。直接 remove() 或 innerHTML = '' 会导致：焦点丢失、键盘导航中断、A11Y 属性失效、性能暴跌（尤其 >200 条）。

正确做法是遍历所有 li.nav-item，根据 textContent 匹配，然后设 style.display = "none" 或 "block"：

const input = document.querySelector('#sidebar input[type="search"]');
const items = document.querySelectorAll('#sidebar .nav-item');

input.addEventListener('input', () => {
  const q = input.value.trim().toLowerCase();
  items.forEach(item => {
    const text = item.textContent.toLowerCase();
    item.style.display = q ? (text.includes(q) ? 'block' : 'none') : 'block';
  });
});

只比对 textContent，别用 innerHTML——否则带图标或 badge 的项会误匹配 HTML 标签
空搜索时务必恢复全部显示，否则用户清空输入框后菜单空白
如果菜单含多级 collapse，过滤后要手动调用 bootstrap.Collapse.getInstance(el).hide() 关闭不匹配的子菜单

移动端点击搜索框，offcanvas 不自动收起？这是设计，不是 bug

offcanvas 默认只响应 data-bs-dismiss 或触发按钮的点击，input 聚焦不会关闭它。这不是缺陷，是为避免误触——但用户点开键盘时菜单还开着，会遮一半屏幕。

VPS Bootstrap

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

下载

解法分两层：

简单场景：给 input 加 data-bs-dismiss="offcanvas"，点击即收。缺点是每次聚焦都关，无法连续输入
真实体验：监听 focusin，只在 offcanvas 展开时主动 hide：

input.addEventListener('focusin', () => {
  const offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('sidebar'));
  if (offcanvas && offcanvas._isShown) {
    offcanvas.hide();
  }
});