javascript - Bootstrap dropup div 从输入源分离

Question

我正在尝试使用具有简单自动完成功能的 Bootstrap 下拉菜单。下拉菜单不会出现此问题，只会出现下拉菜单。

我在这里的 JSFiddle 中复制了这个问题:https://jsfiddle.net/d0haLws6/32/

附带代码:

const CityListMaster = ["Pheonix", "San Francisco", "Minneapolis", "Tampa Bay", "New York", "Buffalo", "Washington DC", "Seattle"];

let CityListFiltered = [];

function PerformListFilter(filterBy){
    filterBy = filterBy.toLowerCase();
  filterArray = CityListMaster.filter(city => city.toLowerCase().indexOf(filterBy) !== -1);

  $('#dropdown-autocomplete-menu').html('');
  for(let i = 0; i < filterArray.length; i++){
    $('#dropdown-autocomplete-menu').append('<a class="dropdown-item" href="#">'+ filterArray[i] +'</a>');
  }
}


$('#dropdown-text-input').keyup(function(e){
    e.preventDefault();
  PerformListFilter(e.target.value);
});


$(document).ready(function(){
    for(let i = 0; i < CityListMaster.length; i++){
    $('#dropdown-autocomplete-menu').append('<a class="dropdown-item" href="#">'+ CityListMaster[i] +'</a>');
  }

})

HTML:

<div class="container">
  <div class="btn-group dropup">
    <input class="dropdown-toggle" type="text" data-toggle="dropdown" id="dropdown-text-input">
    <div class="dropdown-menu" id="dropdown-autocomplete-menu">
    </div>
  </div>
</div>

CSS(提供空间并触发下拉):

#dropdown-text-input{
  margin-top: 400px;
}

如您所见，当您开始输入时，div 会与输入源分离。

我觉得它与库中内置的 Bootstrap 转换 CSS 有关。有没有一种方法可以手动触发扩展 div 的“重新绘制”或新转换？

Answer 1

是的，您可以触发“重新绘制”，在过滤列表以隐藏dropup，紧接着另一个重新显示 dropup

function PerformListFilter(filterBy){
  $('#dropdown-text-input').trigger('click'); // to hide it
    filterBy = filterBy.toLowerCase();
  filterArray = CityListMaster.filter(city => city.toLowerCase().indexOf(filterBy) !== -1);

  $('#dropdown-autocomplete-menu').html('');
  for(let i = 0; i < filterArray.length; i++){
    $('#dropdown-autocomplete-menu').append('<a class="dropdown-item" href="#">'+ filterArray[i] +'</a>');
  }
  $('#dropdown-text-input').trigger('click'); // to re-show it
}

工作 fiddle :https://jsfiddle.net/d0haLws6/75/