Bootstrap 多选模糊事件未触发

Question

在用户完成选择并离开引导程序多选下拉菜单后，我正在尝试做一些逻辑。

我尝试连接到模糊事件：

      <select id="select1" multiple="multiple" class="form-control" data-bind="options: availableValues, selectedOptions: selectedValues, multiselect: {
    includeSelectAllOption: true
  }, event: { blur: $root.onBlur}">
      </select>  

在我的 viewModel 中定义一个 onBlur 函数：

onBlur: function(){
    alert('OnBlur');
}

但它永远不会启动。 我什至尝试在没有$root.onBlur情况下直接设置事件绑定，只是blur: onBlur但没有用。

这是一个示例 JS 小提琴：

https://jsfiddle.net/gtzatrL2/

我错过了什么吗？ 还是模糊事件不适用于引导多选？

我想要模糊的原因是因为在选择了所有项目后，我有一些后端逻辑要通过 Ajax 来完成。 如果我订阅我的 observableArray 更改，它将触发我对添加的每个项目的后端调用，这不是我想要的。

Answer 1

Bootstrap 实际上隐藏了原始的 select 元素并在其位置显示了一个 div，因此 select 上的模糊永远不会被击中，因为它首先没有被聚焦。

我认为因为引导控件使用 div，所以可能根本不可能支持模糊，因为 div 通常不可聚焦。 有几种解决方法，但在这种特殊情况下可能不起作用。 请参阅如何模糊 div 元素？

一种选择 - 您可以对 observableArray 进行速率限制，以便每次选择一个选项时都不会立即触发订阅。 这也将减少后端调用，但并不能保证它不会在用户完成之前触发。

http://knockoutjs.com/documentation/rateLimit-observable.html

this.selectedValues = ko.observableArray().extend({ rateLimit: { timeout: 500, method: "notifyWhenChangesStop" } });

this.selectedValues.subscribe(function() {
    alert("BLUR: " + this.selectedValues().length + " elements selected");
});

Answer 2

这是一个工作示例——当用户“tabs”到第二个输入时，模糊事件回调显示选择了多少元素

 var ViewModel = function() { this.availableValues = ko.observableArray(["Option A", "Option B", "Option C"]); this.selectedValues = ko.observableArray(); this.onBlur = function() { alert("BLUR: " + this.selectedValues().length + " elements selected"); } }; ko.applyBindings(new ViewModel());

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <select id="select1" multiple="multiple" class="form-control" data-bind="options: availableValues, selectedOptions: selectedValues, multiselect: { includeSelectAllOption: true },event: { blur: $root.onBlur}"> <input type="text">

Answer 3

仅供参考，这是来自开发人员 github 页面的回复

https://github.com/davidstutz/bootstrap-multiselect/issues/1020

基本上是说你应该调用onDropdownHide函数来触发多选插件的一种“模糊”

Answer 4

Bootstrap-select 公开了一些用于挂钩到选择功能的事件developer.snapappointments.com

所以可以参考 hide.bs.select 或 hidden.bs.select。 然后，您可以直接从 event 参数访问选定的值，或者如果您有一个附加到 ie selectedOptions 的 Knockout observableArray； 像这样：

$(document).ready(function () {
     $('#select1').on('hide.bs.select', (e) => {
        console.log({ obs: self.selectedValues(), event: $(e.currentTarget).selectpicker('val') });
    });
});