Bootstrap 本身不提供 Tag Selector 组件，需借助 Choices.js 等第三方库或手写逻辑实现；推荐用 Choices.js 结合 Bootstrap 样式类，支持搜索、多选、删除及无障碍访问。

Bootstrap 本身没有内置的 Tag Selector 组件

Bootstrap（包括 v5.x 和 v6 alpha）只提供基础的 form-control、dropdown 和 button-group，不带多选标签输入、动态添加/删除标签、搜索过滤等功能。直接用 form-select 或 form-check 模拟标签选择器，体验差、交互缺失、无法自由输入新标签。

所以实际做法是：用 Bootstrap 的 CSS 类 + 第三方轻量库，或手写最小可行逻辑。

推荐方案：用 Choices.js + Bootstrap 样式兼容

Choices.js 是专注选择器的现代 JS 库，支持单选/多选、搜索、自定义选项、键盘导航，且默认输出语义化 HTML，容易套用 Bootstrap 的 form-control、btn-close 等类。

• 引入 choices.js（CDN 或 npm），确保在 Bootstrap JS 之后加载
• HTML 中用 或 作为容器，加上 class="form-control"
• 初始化时关闭自带样式，用 classNames 映射 Bootstrap 类名：

  new Choices(element, {
    searchEnabled: true,
    removeItemButton: true,
    classNames: {
      containerInner: 'choices__inner form-control',
      input: 'choices__input form-control',
      item: 'choices__item badge bg-primary rounded-pill me-1',
      button: 'btn-close btn-close-white'
    }
  });

• 注意：removeItemButton: true 才会渲染删除按钮，否则需手动绑定点击事件

手写简易版：用 input + span 标签 + Bootstrap badge

如果项目不允许引入额外 JS，可基于原生事件 + Bootstrap 样式快速实现“伪标签选择器”：

VPS Bootstrap

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

下载

• HTML 结构保持干净：
• 监听 input 的 keydown（Enter/Comma）事件，提取值、去重、创建 xxx
• 每个 span 加 data-value 属性，点击右侧 删除对应项
• 关键点：input.value 需清空，且要防止空字符串、重复值、前后空格 —— 否则会出现空白 badge 或重复提交
• 不处理键盘焦点管理的话，Tab 键跳过已选标签；如需完整可访问性，必须手动管理 tabindex 和 aria-* 属性

常见踩坑点：样式冲突与事件穿透

Bootstrap 的 .form-control 默认有 padding 和 border-radius，而 choices.js 或手写标签容器常是绝对定位或 flex 布局，容易导致：

• 标签堆叠在 input 下方而非内嵌——解决：给 .tag-list 设 position: absolute 并调整 top/z-index，同时 input padding-bottom 预留空间
• 点击 btn-close 触发 input 失焦，导致下拉菜单意外关闭——解决：在 button 上加 event.stopPropagation()
• 移动端点击标签后光标仍留在 input，造成误输入——解决：调用 input.blur() 或延迟聚焦到 input
• 使用 form-select 模拟多选时，iOS Safari 不支持 multiple 的视觉反馈，用户不知道已选中——这根本不是标签选择器，应避免

真正能兼顾体验和维护性的方案，还是让 Choices.js 或 TomSelect 这类库接管逻辑，只借用 Bootstrap 的颜色、间距、圆角等设计 token。自己拼 DOM 容易漏掉键盘操作、屏幕阅读器支持、国际化分隔符这些细节。