在搜索时从bootstrap select2中删除active

Question

我在我的一个项目中使用bootstrap selectpicker - https://silviomoreto.github.io/bootstrap-select/

这是我的代码

<select class="selectpicker" data-live-search="true" multiple data-actions-box="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

的javascript：

$('.selectpicker').selectpicker('show');

我有一个问题，当我在下拉列表中搜索时，顶部的第一个搜索项目会突出显示（蓝色）而不进行选择。我只想点击不在搜索条件中的活动类。有什么办法吗？ 这是我的jsfiddle https://jsfiddle.net/poy0o5ss/2/

Answer 1

由于您的特殊情况是在搜索时动态移除.active。您需要定位搜索输入上的.on('input')事件监听器，并从下拉列表中删除active类。像这样

$(function() {
   //This event is fired when the dropdown has been made visible to the user
   $('.selectpicker').on('shown.bs.select', function (e) {
     $('ul.dropdown-menu li:first').removeClass('active');
   });

   $('.form-control').on('input',function(e){
     $('ul.dropdown-menu li:first').removeClass('active');
   });
});

即使您在搜索查询上触发退格键，这也可以正常工作。

Updated Fiddle