Select2强制在页面加载时聚焦

Question

75

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

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

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

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

- user984976

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NielsH · Answer 1

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

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

- Kadeer Mughal · Answer 2

虽然Dan-Nolan已经回答得很好了，但对于那些新手来说，需要注意一点：在调用Select2函数之前，需要使用select2初始化html对象：

因此最终代码应该是：

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

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

- Ali BÜYÜKKILINÇ · Answer 3

我在其他地方找到了这个解决方法，它对我有效。 // 这是一个修复 jQuery 3.6 焦点安全补丁的 hack，可以解决 select-2 中自动搜索的问题。

$(document).on('select2:open', () => {
    document.querySelector('.select2-container--open .select2 search__field').focus();
});

或者

$(document).on('select2:open', () => {
    document.querySelector('.select2-search__field').focus();
});

- Renato Marteli · Answer 4

-3

请使用以下序列：

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

- Renato Marteli

1

一般来说，如果答案包括代码的意图和为什么这样做可以解决问题，而不会引入其他问题，那么它们会更有帮助。（至少一个用户标记了此帖子，可能是因为他们认为没有解释的答案应该被删除。这似乎无明显原因与早已接受的答案背道而驰，这可能对您的情况没有帮助。） - Nathan Tuggy

如果我这样做，就好像什么都没做一样：光标不会放置在Select2创建的输入元素中。 - Robert Bethge