jQuery Select2 - 使用选项卡选择一个选项

Posted 2023-05-07

【中文标题】jQuery Select2 - 使用选项卡选择一个选项

【英文标题】：jQuery Select2 - Use tab to select an option

【发布时间】：2018-11-09 08:15:31

【问题描述】：

我希望能够使用箭头键进入我想要的 select2 选项，然后按 Tab 键选择该选项，然后像往常一样使用 Tab 键转到下一个元素。

我已经得到了打开 select2 的向下箭头：

$(document).on('keydown', '.select2', function(e) 
  if (e.originalEvent && e.which == 40) 
    e.preventDefault();
    $(this).siblings('select').select2('open');
   
);

我还可以使用箭头到达我需要去的地方。现在我正在努力使标签部分工作。

我假设因为select2-search__field 在我按下键时有焦点，那是我将事件绑定到的元素？然后大概我需要获取当前突出显示选项的值并触发 select2 更改？

我不是 100% 确定这是正确的方法，但我无法完全弄清楚。

【问题讨论】：

您能否通过添加一个 sn-p 为我们提供一个工作示例？ :)

【参考方案1】：

要实现这一点，您可以使用selectOnClose: true：

$(document).on('keydown', '.select2', function(e) 
  if (e.originalEvent && e.which == 40) 
    e.preventDefault();
    $(this).siblings('select').select2('open');
  
);

$('select').select2(
  selectOnClose: true
);

select 
  min-width: 150px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<select>
  <option>AAAAA</option>
  <option>BBBB</option>
  <option>CCCC</option>
  <option>DDDD</option>
  <option>EEEE</option>
  <option>FFFF</option>
  <option>GGGG</option>
</select>

【讨论】：

啊，太好了，谢谢。猜猜我把事情复杂化了！唯一不能处理的是恢复默认行为，即切换到页面上的下一个元素。是否有同样简单的方法来实现这一点，还是需要手动完成？

有效，但我不需要selectOnClose。

我可以工作，但在关闭时它会选择最新突出显示的选项，这不是所需的行为，我只需要在按键 enter/tab 上选择所选选项。

这种方法的另一个问题是 Esc 也会选择关闭，这不是很直观的行为。

【参考方案2】：

只需在您的代码中添加以下行。

$(document).on("select2:close", '.select2-hidden-accessible', function ()  $(this).focus(); );

您的问题将得到解决。

【参考方案3】：

我也有同样的问题。因为selectOnClose: true 也意味着按下 Esc 或在选择下拉列表之外单击是选择输入，所以我选择了一个比接受的答案更复杂且不那么优雅的解决方案。我的解决方案为我解决了这个问题（并允许随后的选项卡将焦点切换到 DOM）。

我为 select2:closing 添加了一个侦听器（它在关闭之前立即触发，因此当突出显示的 li 仍然突出显示时）。 Select2 为该 li 提供一个 id，其中包含与其相关的选项的值。我将其解析出来并将其保存在状态中（我正在使用 Vue）：

$(this.subjectSelect2).on('select2:closing', () => 
    var idArray = $(".select2-results__option--highlighted")[0].id.split("-");
    var id = idArray[idArray.length - 1];
    this.select2LastHighlighted = id;
)

然后我为 keydown 添加了一个监听器，这样如果按下了 tab，它就会从 state 中获取该值，并将 select2 更新为该值：

$(this.subjectSelect2).on('select2:open', () => 
    $(".select2-search__field")
        .on('keydown', (e) => 
            if (e.key == 'Tab') 
                this.subjectSelect2.val(this.select2LastHighlighted);
                this.subjectSelect2.trigger('change');
            
        )
)

我很想知道是否有人有更优雅的方式来做到这一点！