select2 force focus on page load

问题

I am trying to make a select2 box appear in its focused state on page load. I have tried the following:

$('#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.

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"

回答1:

According to the Select2 documentation:

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

Should be all you need.

Found under the Programmatic Access section in the documentation.

回答2:

This works in release 3.4.2. Not sure when it was implemented exactly.

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

回答3:

Select2 creates its own input, so try something like this:

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

回答4:

If you use:

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

The select2 is opened and you can type directly for searching.

If you use:

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

The focus is set to the created select2 dropdownlist. If you hit Enter or Ctrl + Arrow down on your keyboard, you can open it.

Is personally think this is better than:

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

because you can't really open the select2 dropdownlist with your keyboard.

回答5:

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');

回答6:

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 open method didn't have any effect.

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-focusser class attached to it.

回答7:

We had a textfield as select2 and used the following snippet to activate and focus the cursor in the text input. All the other options didn't work for us, as they were only opening the select2 options, but didn't produce the expected behavior.

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

回答8:

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:

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

回答9:

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:

so final code should be

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

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

回答10:

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.

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

回答11:

According to the select2 documentation:

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

回答12:

Use this sequece:

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

来源：https://stackoverflow.com/questions/16641033/select2-force-focus-on-page-load

标签

jquery

jquery-select2