Bootstrap高级下拉搜索框问题咨询：仅首个输入框输入无响应

我来帮你搞定这个问题！针对你遇到的「第一个输入框输入无响应」和「添加表单后下拉按钮错位」这两个痛点，我整理了具体的修复方案：

一、解决第一个输入框无触发操作的问题 #

原示例大概率只监听了下拉面板内的输入事件，忽略了主输入框的交互。我们可以给主输入框添加实时输入监听，触发搜索逻辑并控制下拉面板的显示：

// 假设主输入框的ID是main-search-input
$('#main-search-input').on('input keyup', function() {
  const searchText = $(this).val().trim();
  
  // 根据输入内容控制下拉面板显示/隐藏
  if (searchText.length > 0) {
    $('.dropdown-menu').addClass('show');
    // 这里可以加入你的搜索过滤逻辑，比如筛选下拉选项
    filterDropdownItems(searchText);
  } else {
    $('.dropdown-menu').removeClass('show');
  }
});

// 示例：过滤下拉选项的函数
function filterDropdownItems(keyword) {
  $('.dropdown-menu .dropdown-item').each(function() {
    const itemText = $(this).text().toLowerCase();
    $(this).toggle(itemText.includes(keyword.toLowerCase()));
  });
}

这段代码会在用户输入时实时响应：输入内容时展开下拉并过滤选项，清空输入时收起下拉。

二、解决添加表单后下拉按钮错位的问题 #

直接套表单会破坏Bootstrap输入组的布局结构，正确的做法是把输入框和下拉按钮放在同一个.input-group容器内，再嵌套到表单中：

<form class="custom-search-form">
  <div class="input-group">
    <!-- 主搜索输入框 -->
    <input type="text" id="main-search-input" class="form-control" placeholder="输入关键词搜索">
    
    <!-- 下拉按钮容器 -->
    <div class="input-group-append">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        筛选选项
      </button>
      <!-- 下拉面板 -->
      <div class="dropdown-menu dropdown-menu-right">
        <div class="p-3">
          <input type="text" class="form-control form-control-sm" placeholder="细化搜索">
        </div>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">分类1</a>
        <a class="dropdown-item" href="#">分类2</a>
        <a class="dropdown-item" href="#">分类3</a>
      </div>
    </div>
  </div>
</form>

额外样式调整（可选） #

如果下拉面板宽度和输入框不匹配，可以加一点自定义CSS让它对齐：

.custom-search-form .dropdown-menu {
  min-width: 100%; /* 让下拉面板宽度和输入组一致 */
}

这样既保留了表单的提交功能，又能让输入框和下拉按钮完美对齐，不会出现错位问题。

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