Bootstrap Popover无法显示HTML表单问题排查

问题原因 #

Bootstrap 5的Popover组件默认启用**HTML内容清理（Sanitization）**机制，会过滤掉不在默认允许列表中的HTML标签和属性。form标签不在默认允许的标签范围内，因此被自动过滤，导致Popover显示为空。

你的引号使用是正确的（单引号包裹data-bs-content，内部用双引号），这不是导致问题的原因。

解决方法：调整Popover的清理规则 #

你可以在初始化Popover时，配置允许form、input标签及所需属性，或者直接关闭清理（仅当内容完全可信时推荐）。

方法1：允许指定标签和属性（推荐） #

修改JavaScript初始化代码，添加sanitize相关配置：

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => 
  new bootstrap.Popover(popoverTriggerEl, {
    sanitize: true,
    allowedTags: ['form', 'input'],
    allowedAttributes: {
      input: ['class', 'type', 'name']
    }
  })
);

方法2：关闭内容清理（不推荐，仅安全场景使用） #

如果能确保data-bs-content中的内容完全安全（无恶意代码），可以直接关闭清理：

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => 
  new bootstrap.Popover(popoverTriggerEl, {
    sanitize: false
  })
);

替代方案：使用Dropdown组件实现弹出搜索表单 #

如果不想处理Popover的清理规则，推荐使用Bootstrap的Dropdown组件来实现弹出式搜索表单，它天然支持复杂内容，无需额外配置：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    <i class="fa-solid fa-magnifying-glass"></i>
  </a>
  <div class="dropdown-menu p-2">
    <form>
      <input class="form-control" type="text" name="search" placeholder="搜索..." />
    </form>
  </div>
</li>

点击放大镜图标即可弹出包含搜索表单的下拉菜单，体验与Popover一致，且兼容性更好。

内容的提问来源于stack exchange，提问作者Mathew Smith