Bootstrap Select Picker聚焦后搜索选项未显示的问题求助

我明白你的需求：点击按钮或者按回车键时，不仅要让选择器获得焦点，还要直接展开下拉菜单并让搜索框自动聚焦，这样就能直接输入搜索内容了。你之前用原生focus()的方式不行，是因为Bootstrap Select是封装过的组件，得用它自己的API来操作才行。

直接上解决方案： #

1. 修改按钮点击事件 #

把原来的$('.selectpicker').focus()换成组件的toggle方法，展开下拉后再手动聚焦到搜索框：

$("#focus").click(function() {
  // 先展开下拉菜单
  $('.selectpicker').selectpicker('toggle');
  // 加个小延迟，确保下拉菜单已经渲染出来，再聚焦搜索框
  setTimeout(() => {
    $('.bs-searchbox input').focus();
  }, 100);
});

2. 加上回车键触发逻辑 #

如果要按回车键也实现同样效果，监听文档的回车键事件就行：

$(document).keydown(function(e) {
  // 判断是否按下回车键（keyCode 13）
  if (e.keyCode === 13) {
    $('.selectpicker').selectpicker('toggle');
    setTimeout(() => {
      $('.bs-searchbox input').focus();
    }, 100);
  }
});

完整可运行代码 #

把这些代码整合到你的页面里，就能实现你要的效果了：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>

<select data-live-search="true" data-live-search-style="startsWith" class="selectpicker">
  <option value="4444">4444</option>
  <option value="Fedex">Fedex</option>
  <option value="Elite">Elite</option>
  <option value="Interp">Interp</option>
  <option value="Test">Test</option>
</select>
<button id="focus">focus</button>

<script>
$("#focus").click(function() {
  $('.selectpicker').selectpicker('toggle');
  setTimeout(() => {
    $('.bs-searchbox input').focus();
  }, 100);
});

// 回车键触发逻辑
$(document).keydown(function(e) {
  if (e.keyCode === 13) {
    $('.selectpicker').selectpicker('toggle');
    setTimeout(() => {
      $('.bs-searchbox input').focus();
    }, 100);
  }
});
</script>

为啥原来的代码没效果？ #

简单说，Bootstrap Select把原生的select标签隐藏了，你看到的可视化组件是它动态生成的DOM。原生的focus()只能作用于被隐藏的原生select，没法触发组件的下拉展开。而用selectpicker('toggle')方法才是组件官方提供的触发下拉的方式，之后再找到内部的搜索输入框（类名是bs-searchbox input）并聚焦，就能直接开始搜索啦。

内容的提问来源于stack exchange，提问作者Vaishnavi Deshpande