Select2强制关注页面加载

我试图使一个 select2框出现在其 集中注意力状态的页面加载。我试过以下方法:

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

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

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

70935 次浏览
小开

Select2创建自己的输入，所以尝试这样做:

$(window).load(function(){
$('#id').prev('.select2-container').find('.select2-input').focus();
});
小开
最佳答案

根据 Select2文档:

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

应该足够了。

在 文件的 程式存取区下面找到的。

小开

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

不过，下面这些对我来说还是不错的:

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

如果出于某种原因，您的设置中没有出现相同的 id，那么查找附加了 Select2聚焦器类的控件。

小开

这在3.4.2版本中可以工作。不确定它是什么时候实现的。

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

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

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

小开

使用以下顺序:

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

在 Select24.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();
小开

如果你使用:

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

Select2被打开，您可以直接键入以进行搜索。

如果你使用:

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

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

我个人认为这比:

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

因为你不能用键盘打开 select2下拉列表。

小开

Dan-Nolan 已经很好地回答了这个问题，但是对于那些对 Select2不熟悉的人来说，需要注意的是: html 对象在调用其函数之前需要用 select2进行初始化:

所以最终代码应该是

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


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

这是什么工作为我，它也放置了闪烁的光标在输入字段。顺序问题！

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

在 select24.0.2上，Select2(‘ focus’)有问题。列表看起来是聚焦的，但是当我按 ENTER 时列表没有打开。
对我来说，这就是解决办法。

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

根据 select2文档:

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

如 https://forums.select2.org/t/search-being-unfocused/1203/10中所述，目前 Select24.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();
});

提交答案