为 bootstrap-select / select2 关闭自动对焦

Question

http://www.bootply.com/YAQrE52K6X

    $("#dataCombo").selectpicker({
    multiple:true
    });

    <div class="container">

  <h3>Multiple Select</h3>
  <select id="dataCombo" class="selectpicker" data-live-search="true" multiple="multiple" style="width:400px;">

    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
    <option value="five">Five</option>
    <option value="six">Six</option>
  </select>

</div>

我想关闭自动对焦，这样输入就不会要求我在单击下拉菜单后立即进行搜索。尝试使用 .blur 等...但目前还没有。环顾四周寻找修复方法。由于同样的问题，从 "select2" 移至使用 "bootstrap-select"。设备上的键盘似乎覆盖了多个下拉项

Answer 1

我无法用 bootstrap-select 解决这个问题（似乎他们在触发 show.bs.select 和 shown.bs.select 事件时遇到了一些问题），但是由于您还提到您使用 select2 尝试过此操作，因此这是 select2:

的解决方案

  $("#dataCombo").select2({
    closeOnSelect: false
  });
  $("#dataCombo").on('select2:open', function () {
    $(document.activeElement).blur()
  });

检查这个例子：
https://jsfiddle.net/yw61h28z/

更新 - 2016/12/05

设法让它工作（花了一些时间来玩 focus/blur/targets 东西）。

$(document).ready(function() {
  $("#dataCombo").select2({
    closeOnSelect: false
  });
  $("#dataCombo").one('select2:open', function (e) {
    $(document.activeElement).blur()
  });
  $("#dataCombo").on('select2:close', function(e) {
    if ($(event.target).parents('.select2').length) {
      // The closing was done inside the select2 container
    } else {
      $("#dataCombo").one('select2:open', function (e) {
        $(document.activeElement).blur()
      });
    }
  });
});

这是对我原来的 jsfiddle 的更新：
https://jsfiddle.net/yw61h28z/4/

Here is the idea behind the code:
1. The first time the select2 is opened - blur the input (but only one time) - this makes sure the select2 menu is opened, but the input isn't focused (so the keyboard is not displayed).
2. On closing the select2 menu - check the element that caused the close.
2.1. If that element is part of the select2 block - ignore it and close keep closing the menu.
2.2 Else - The next time the select2 menu is opened we blur the input (again - only 1 time).

Answer 2

对于 bootstrap select 选择器你可以这样做它对我有用:

$(document).on("change","select.selectpicker",function(){
    $(this).next().next().children(".bs-searchbox").children("input[type='search']").blur()
});

为 bootstrap-select / select2 关闭自动对焦

Turn off autofocus for bootstrap-select / select2

jquery

twitter-bootstrap

jquery-select2

bootstrap-select

更新 - 2016/12/05