Question

我试图通过简单的自动完成来使用bootstrap dropup。下拉列表不会发生此问题，只有dropup。

我已经在JSFiddle中复制了这个问题：https://jsfiddle.net/d0haLws6/32/

随附代码：

within(df,cityOrder <- unlist(tapply(city, firm, function(x) 
  as.numeric(factor(x,unique(x))))))

#   firm       date     city numStores cityOrder
# 1    1 2017-01-01 New York         1         1
# 2    1 2017-03-01       DC         1         2
# 3    1 2017-05-01 New York         2         1
# 4    1 2017-06-01  Atlanta         1         3
# 5    2 2017-02-01       DC         1         1
# 6    2 2017-04-01       DC         2         1
# 7    2 2017-05-01  Chicago         1         2
# 8    2 2017-06-01  Atlanta         1         3

HTML：

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>');
  }

})

CSS（提供空间并触发dropup）：

<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>

如您所见，当您开始输入时，div会从输入源中分离出来。

我觉得它与引入库中的引导变换CSS有关。有没有办法让我可以手动触发“重新绘制”＆＃39;或扩展div的新变换？

Answer 1

是的，您可以trigger“重新绘制”，在过滤列表以隐藏click之前触发input右侧的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
}

工作小提琴：https://jsfiddle.net/d0haLws6/75/

Answer 2

我找到了一个更好的答案，不知何故我在文档中忽略了。

$('#dropdown-text-input').dropdown('update');

这更顺畅，并且不会遇到我通过点击方法看到的任何性能问题。

Bootstrap dropup div与输入源分离

2 个答案: