请问Bootstrap是否提供兼具文本输入与下拉选择的Combobox组件？

Hey there! Great question—let’s break this down clearly for you.

Bootstrap doesn’t have a single out-of-the-box component that combines a manually editable text input with a dropdown of preset values. But the good news is you can easily build this exact functionality using Bootstrap’s existing Dropdown and form input components, and it’ll work across all browsers that Bootstrap supports (Chrome, Firefox, Safari, Edge, even IE11 if you’re using Bootstrap 4).

实现步骤与代码示例 #

Here’s a clean, Bootstrap-native implementation that hits all your requirements:

1. HTML结构

We’ll wrap a form input and dropdown toggle in an input-group to keep them visually aligned, then add the dropdown menu with your preset values:

<div class="dropdown">
  <div class="input-group">
    <input type="text" class="form-control" id="editableDropdownInput" placeholder="输入或选择预设值">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#" data-value="月度报表">月度报表</a></li>
      <li><a class="dropdown-item" href="#" data-value="季度总结">季度总结</a></li>
      <li><a class="dropdown-item" href="#" data-value="年度报告">年度报告</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#" data-value="自定义报告">自定义报告</a></li>
    </ul>
  </div>
</div>

2. JavaScript交互逻辑

Add a small snippet of vanilla JS to populate the input when a dropdown item is clicked. This uses Bootstrap’s native dropdown behavior, so no extra libraries are needed:

// 获取输入框和所有下拉选项
const inputField = document.getElementById('editableDropdownInput');
const dropdownItems = document.querySelectorAll('.dropdown-item');

// 绑定点击事件，填充输入框
dropdownItems.forEach(item => {
  item.addEventListener('click', function(e) {
    e.preventDefault();
    inputField.value = this.getAttribute('data-value');
  });
});

额外说明 #

• 浏览器兼容性: Since this uses only Bootstrap’s core components and vanilla JS, it’ll work everywhere Bootstrap is supported—no weird cross-browser issues to worry about.
• 进阶功能: If you need searchable preset values or more complex behavior, you can extend this with a bit more JS (like filtering dropdown items as the user types) or use a Bootstrap-compatible third-party plugin (but the above setup covers your basic needs perfectly).

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