Bootstrap dropup组件与输入源分离问题求助：仅dropup出现该异常

我最近在用Bootstrap的dropup组件实现简易自动补全功能时，碰到了一个头疼的问题——同样的逻辑套在dropdown组件上完全正常，但dropup就是会出现显示异常。下面是我复现问题的核心代码，以及最终解决问题的思路和方案：

核心代码片段 #

// 城市数据源
const CityListMaster = ["Pheonix", "San Francisco", "Minneapolis", "Tampa Bay", "New York", "Buffalo", "Washington DC", "Seattle"]; 
let CityListFiltered = []; 

// 过滤城市列表的函数
function PerformListFilter(filterBy){ 
  filterBy = filterBy.toLowerCase(); 
  CityListFiltered = CityListMaster.filter(city => city.toLowerCase().includes(filterBy));
  renderFilteredList();
}

// 渲染过滤后的列表到dropup菜单
function renderFilteredList() {
  const menu = document.querySelector('.dropup .dropdown-menu');
  menu.innerHTML = '';
  
  CityListFiltered.forEach(city => {
    const item = document.createElement('a');
    item.className = 'dropdown-item';
    item.href = '#';
    item.textContent = city;
    item.addEventListener('click', () => {
      document.getElementById('cityInput').value = city;
    });
    menu.appendChild(item);
  });
}

// 输入框监听事件
document.getElementById('cityInput').addEventListener('input', function(e) {
  PerformListFilter(e.target.value);
  // 最初尝试手动添加show类来显示菜单
  const dropup = document.querySelector('.dropup');
  dropup.classList.add('show');
  dropup.querySelector('.dropdown-menu').classList.add('show');
});

问题原因分析 #

排查后发现，问题出在手动操作DOM类控制dropup显示的方式上：

• Bootstrap的dropup和dropdown组件内部的状态管理逻辑不同，dropup的菜单是向上展开的，其位置计算依赖组件内部的状态同步
• 直接添加show类虽然能让菜单显示，但组件没有触发重新计算位置的逻辑，导致菜单可能出现偏移、超出视口，甚至无法正常响应点击的情况
• 相比之下，dropdown的向下展开逻辑对手动类操作的兼容性更好，所以没暴露问题

解决方案 #

1. 使用Bootstrap官方API控制组件状态 #

不要手动添加/移除show类，改用Dropdown实例的show()和hide()方法来控制显示，确保组件内部状态同步：

document.getElementById('cityInput').addEventListener('input', function(e) {
  PerformListFilter(e.target.value);
  // 通过API显示dropup菜单
  const dropdownInstance = new bootstrap.Dropdown(document.querySelector('.dropup'));
  dropdownInstance.show();
});

2. 动态更新菜单后重新计算位置 #

每次渲染完过滤后的列表，调用组件的update()方法，让Bootstrap重新计算菜单的定位：

function renderFilteredList() {
  const menu = document.querySelector('.dropup .dropdown-menu');
  menu.innerHTML = '';
  
  CityListFiltered.forEach(city => {
    const item = document.createElement('a');
    item.className = 'dropdown-item';
    item.href = '#';
    item.textContent = city;
    item.addEventListener('click', () => {
      document.getElementById('cityInput').value = city;
    });
    menu.appendChild(item);
  });
  
  // 更新组件位置
  const dropdownInstance = new bootstrap.Dropdown(document.querySelector('.dropup'));
  dropdownInstance.update();
}

3. 添加视口边界约束 #

给dropup元素添加data-bs-boundary="viewport"属性，确保菜单不会超出浏览器视口范围：

<div class="dropup" data-bs-toggle="dropdown" data-bs-boundary="viewport">
  <input type="text" id="cityInput" class="form-control" placeholder="输入城市">
  <ul class="dropdown-menu">
    <!-- 动态生成列表项 -->
  </ul>
</div>

做完这些改动后，dropup组件的自动补全功能就和dropdown一样正常工作了，核心就是遵循Bootstrap组件的设计规范，用官方API来控制状态，而不是直接操作DOM。

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