使用jQuery chosen插件的Select搜索框在小屏幕设备上消失如何解决？

我搭建了一个可通过搜索栏查询ID的表单，桌面端视图下功能展示正常，切换到手机屏幕视图时，搜索栏会消失。

使用的代码如下：

HTML代码

<label for="supervisor"> </label>
<br>
<select id="supervisor" class="chosen" onchange="getSuper(this.value)" required>
  <option disabled selected value>-</option>
  <option value="ID3357">ID3357</option>
  <option value="ID2695">ID2695</option>
</select>

自动补全搜索的jQuery代码

<script type="text/javascript">
  $(".chosen").chosen();
</script>

解决方案 #

这个问题是Chosen插件的默认适配逻辑导致的：插件默认会在移动设备上自动禁用自定义下拉组件，回退到原生select控件，所以会出现搜索栏消失的情况。
你只需要在初始化Chosen的时候添加配置项，强制移动端启用插件即可：

$(".chosen").chosen({
  disable_search: false,
  mobile_disable: false
});

如果上面的配置不生效，大概率是你使用的Chosen版本参数命名不同，替换为如下配置即可：

$(".chosen").chosen({
  disable_search: false,
  disable_mobile: false
});

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