jquery - select2 强制关注页面加载

Question

我试图让一个 select2 框在页面加载时以其聚焦状态出现。我尝试了以下方法：

$('#id').select2('focus');
$('#id').trigger('click');
$('#id').trigger('focus');

只有第一行似乎有任何效果，它确实聚焦 select2 字段，但是它需要额外的按键来显示搜索字段，并允许输入搜索字符串。

因此，如果您加载页面并开始输入：“搜索”，“S”将打开搜索框，然后将其余键输入其中，因此您将搜索“arch”

Answer 1

根据 Select2 文档：

$('#id').select2('open');

应该是你所需要的。

在文档的Programmatic Access部分下找到。

Answer 2

这适用于版本 3.4.2。不确定何时准确实施。

$('#id').select2('focus');

Answer 3

如果您使用：

$('#id').select2('open');

select2被打开，你可以直接键入进行搜索。

如果您使用：

$('#id').select2('open').select2('close');

焦点设置为创建的 select2 下拉列表。如果您敲击Enter或Ctrl + Arrow down敲击键盘，您可以打开它。

个人认为这比：

$('#id').select2('focus');

因为您无法真正使用键盘打开 select2 下拉列表。

Answer 4

Select2 创建自己的输入，因此请尝试以下操作：

$(window).load(function(){
  $('#id').prev('.select2-container').find('.select2-input').focus();
});

Answer 5

这对我有用，它还将闪烁的光标放在输入字段中。订单很重要！

$('#s2id').select2('focus');
$('#s2id').select2('open');

Answer 6

如https://forums.select2.org/t/search-being-unfocused/1203/10中所述，目前在 Select2 4.x 和 JQuery 3.6.0 的组合中焦点被打破

两个修复：降级到 JQuery 3.5.1 或

// hack to fix jquery 3.6 focus security patch that bugs auto search in select-2
$(document).on('select2:open', () => {
    document.querySelector('.select2-search__field').focus();
});

Answer 7

在 Select2 4.0.2 上，我遇到了 select2('focus') 的问题。列表看起来很集中，但是当我按 ENTER 时，列表没有打开。
对我来说，这就是解决方案。

$('#id').select2();
$('.select2-selection', $('#id').next()).focus();
or
$('#id').next().find('.select2-selection').focus();

Answer 8

我尝试了其他 2 个答案，但运气不佳，可能是因为我通过 json 填充了控件，而一开始它只是一个隐藏的输入，因此编程打开方法没有任何效果。

但是，以下内容对我来说很好：

$(document).ready(function() 
{     
    $('#s2id_autogen1').focus();
});

如果由于某种原因，您的设置中没有出现相同的 id，则查找附加了select2-focusser类的控件。

Answer 9

我们有一个作为 select2 的文本字段，并使用以下代码段来激活光标并将光标聚焦在文本输入中。所有其他选项都对我们不起作用，因为它们只打开了 select2 选项，但没有产生预期的行为。

$('#s2id_autogen1').click()
$('#s2id_autogen1').focus()

Answer 10

根据 select2 文档：

$('document').ready(function(){
   var opencustomer = $("#changedatachange").select2();
   opencustomer.select2("open");
});

Answer 11

在 Select2 4.0 上，方法 .select2('focus') 什么都不做。但是，我的解决方法是简单地获取具有“aria-labelledby”属性的“span”元素（注意该值是基于 id 的，所以它有点独特），并关注它：

var $field = $('select');
$field.select2();
var id = $field.attr('id');
var $spanLabel = $field.next().find("span[aria-labelledby='select2-" + id + "-container']");
$spanLabel.focus();

Answer 12

Dan-Nolan 已经很好地回答了，但对于那些不熟悉 Select2 的人来说，需要注意一点：在调用其函数之前，需要使用 select2 初始化 html 对象：

所以最终的代码应该是

$('#id').select2();

$('#id').select2('open');

Answer 13

使用这个序列：

$('#id').select2('open');
$('#id').select2('close');