如何在不获取焦点的情况下程序化打开Chosen下拉框并保持展开

要实现虚拟键盘输入时让Chosen下拉框保持展开且不抢占焦点，你可以通过拦截Chosen的默认关闭逻辑、手动控制下拉状态这几个方向来解决：

1. 拦截Chosen的失焦关闭行为 #

Chosen默认会在失去焦点时关闭下拉框，我们可以通过chosen:hiding事件来阻止这个行为，只在需要的时候才允许关闭：

// 定义状态变量标记是否需要保持下拉框展开
let keepDropdownOpen = false;

$('.chosen-select').on('chosen:hiding', function(e) {
  if (keepDropdownOpen) {
    e.preventDefault(); // 阻止下拉框关闭
  }
});

2. 手动触发下拉框展开 #

不需要让Chosen获取焦点，直接调用Chosen的打开事件就能展开下拉框，比如在虚拟键盘开始输入时触发：

// 虚拟键盘启动时调用，或者示例中输入框获得焦点时
keepDropdownOpen = true;
$('.chosen-select').trigger('chosen:open');

3. 同步隐藏输入框到Chosen搜索框 #

把隐藏输入框的内容同步到Chosen动态生成的搜索输入框，同时触发输入事件让Chosen自动过滤选项：

$('#hidden-input').on('input', function() {
  const searchInput = $('.chosen-select').next('.chosen-container').find('.chosen-search input');
  searchInput.val($(this).val()).trigger('input');
});

4. 选择选项后关闭下拉框并重置状态 #

当用户选中选项后，重置状态并手动关闭下拉框：

$('.chosen-select').on('chosen:selected', function() {
  keepDropdownOpen = false;
  $(this).trigger('chosen:close');
  $('#hidden-input').val(''); // 可选：清空隐藏输入框
});

额外注意 #

• 可以根据需求调整keepDropdownOpen的切换时机，比如虚拟键盘收起时也设为false，让下拉框可以正常关闭。
• 如果需要处理用户点击页面其他区域的情况，可以监听全局点击事件，判断点击目标不是虚拟键盘或输入框时，重置状态并关闭下拉框。

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