Select2强制在页面加载时聚焦

Question

我正在尝试在页面加载时将select2框显示为其聚焦状态。 我已尝试以下内容：

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

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

因此，如果您加载页面并开始输入："搜索"，则"S"将打开搜索框，然后剩余的键将输入其中，因此您将搜索"earch"。

- user984976

Answer 1

根据Select2的文档：

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

这应该是您所需的全部内容。

在文档的编程访问部分下找到。

- Dan-Nolan

---

$('#id').select2('open'); 将设置焦点并打开 Select2，准备进行搜索。 $('#id').select2('focus'); 将在 Select2 上设置焦点，但不会打开 Select2 进行搜索。 - Adrian P.

正如@AdrianP所说，它也打开了它... 而focus选项不太直观：http://jsfiddle.net/mJEZK/13/ - Alvaro

不支持多个。 - jjxtra

Answer 2

这在版本3.4.2中可以正常工作，不确定确切的实现时间。

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

- keaplogik

---

我在文档中找不到这个！非常感谢您的分享！ - Parth Shah

同样适用于4.0版本。仍未记录。 - akaspick

Answer 3

如果你使用：

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

可以直接输入搜索内容。 如果您使用：

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

将焦点设置为创建的select2下拉列表。如果您在键盘上按下Enter或Ctrl+向下箭头，则可以打开它。

我个人认为这比以下写法更好：

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

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

- LockTar

---

正是我所寻求的行为。值得更多赞。 - slinhart

$('#id').select2('open').select2('close'); 在使用select2 V4.0时，当其他方法无效时，此代码可使用并具有奖励作用。谢谢！ - pdobb

另一种解决方案是使用$('.select2-search__field').focus()直接将焦点设置在创建的输入元素上。 - Simon

Answer 4

会创建自己的输入框，所以可以尝试像这样做：

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

- Mottie

Answer 5

这是适用于我的方法，它还将闪烁的光标放置在输入字段中。顺序很重要！

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

- Elon Zito

Answer 6

根据select2文档：

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

- HARDIK

---

通常最好解释一下解决方案，而不仅仅是发布一些匿名代码行。您可以阅读《如何撰写良好的答案》和《解释完全基于代码的答案》。 - Massimiliano Kraus

Answer 7

在Select2 4.0.2版本中，我遇到了一个问题，即使用select2('focus')时，列表看起来已经聚焦，但按下ENTER键后列表不会打开。
对于我来说，这是解决方案。

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

- Mariusz Charczuk

Answer 8

如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();
});

- Bram Luyten

---

这是一个重要的提示。救了我的一天！谢谢 - harrrrrrry

Answer 9

在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();

- Leonardo Montenegro

Answer 10

我尝试了其他两个答案，但运气不太好，可能是因为我通过json填充控件，在开始时它只是一个隐藏的输入，所以编程的open方法没有任何效果。

然而，以下方法对我来说完全没问题：

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

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

- gts