jQuery select2 强制关注页面加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16641033/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
select2 force focus on page load
提问by user984976
I am trying to make a select2 box appear in its focusedstate on page load. I have tried the following:
我正在尝试使 select2 框在页面加载时显示为聚焦状态。我尝试了以下方法：
$('#id').select2('focus');
$('#id').trigger('click');
$('#id').trigger('focus');
Only the first line seems to have any effect, and it does focus the select2 field, however it requires an additional keypress to display the search field, and to allow typing in search string.
只有第一行似乎有任何效果，它确实聚焦 select2 字段，但是它需要额外的按键来显示搜索字段，并允许输入搜索字符串。
Therefore, if you load the page and start typing: "Search", the "S" will open the search box and then the remainder of the keys will be entered into it, so you'll be searching "earch"
因此，如果您加载页面并开始输入：“搜索”，“S”将打开搜索框，然后将其余的键输入其中，因此您将搜索“搜索”
回答by Dan-Nolan
According to the Select2 documentation:
根据 Select2 文档：
$('#id').select2('open');
Should be all you need.
应该是你所需要的。
Found under the Programmatic Accesssection in the documentation.
可在文档的Programmatic Access部分下找到。
回答by keaplogik
This works in release 3.4.2. Not sure when it was implemented exactly.
这适用于 3.4.2 版。不确定它是什么时候实施的。
$('#id').select2('focus');
回答by Ralph Jansen
If you use:
如果您使用：
$('#id').select2('open');
The select2 is opened and you can type directly for searching.
select2打开，可以直接输入搜索。
If you use:
如果您使用：
$('#id').select2('open').select2('close');
The focus is set to the created select2 dropdownlist. If you hit Enteror Ctrl + Arrow downon your keyboard, you can open it.
焦点设置为创建的 select2 下拉列表。如果您敲击Enter或Ctrl + Arrow down在您的键盘上，您可以打开它。
Is personally think this is better than:
个人认为这比：
$('#id').select2('focus');
because you can't really open the select2 dropdownlist with your keyboard.
因为您无法真正用键盘打开 select2 下拉列表。
回答by Mottie
Select2 creates its own input, so try something like this:
Select2 创建它自己的输入，所以尝试这样的事情：
$(window).load(function(){
$('#id').prev('.select2-container').find('.select2-input').focus();
});
回答by Elon Zito
This is what worked for me, and it also placed the blinking cursor in the input field. Order matters!
这对我有用，它还在输入字段中放置了闪烁的光标。订单很重要！
$('#s2id').select2('focus');
$('#s2id').select2('open');
回答by Mariusz Charczuk
On Select2 4.0.2 I have a problem with select2('focus'). List looks like focused but when I press ENTER list not open.
For me that is the solution.
在 Select2 4.0.2 上，select2('focus') 有问题。列表看起来很集中，但是当我按 ENTER 列表未打开时。
对我来说，这就是解决方案。
$('#id').select2();
$('.select2-selection', $('#id').next()).focus();
or
$('#id').next().find('.select2-selection').focus();
回答by HARDIK
According to the select2 documentation:
根据 select2 文档：
$('document').ready(function(){
var opencustomer = $("#changedatachange").select2();
opencustomer.select2("open");
});
回答by Leonardo Montenegro
On Select2 4.0, the method .select2('focus') does nothing. However, my workaround was simply getting the 'span' element with "aria-labelledby" attribute (notice the value is id-based, so it's kind of unique), and focus it:
在 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();
回答by gts
I tried the other 2 answers but didn't have much luck, maybe because I populate the control via json and in the beginning it's just a hidden input so the programmatic openmethod didn't have any effect.
我尝试了其他 2 个答案，但运气不佳，可能是因为我通过 json 填充控件，而一开始它只是一个隐藏的输入，因此编程打开方法没有任何效果。
However, the following did it just fine for me:
但是，以下对我来说很好：
$(document).ready(function()
{
$('#s2id_autogen1').focus();
});
If for some reason you don't have the same id come up in your setup then look for the control having the select2-focusserclass attached to it.
如果由于某种原因，您的设置中没有出现相同的 id，请查找附加了select2-focusser类的控件。
回答by Kadeer Mughal
Already well answered by Dan-Nolan but for those who are new to Select2 a little thing to note: html object needs to be intialised with select2 before calling its functions:
Dan-Nolan 已经很好地回答了，但是对于 Select2 的新手来说，需要注意一点：在调用其函数之前，html 对象需要使用 select2 进行初始化：
so final code should be
所以最终的代码应该是
$('#id').select2();
$('#id').select2('open');
