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"

According to the Select2 documentation:

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

Should be all you need.

Found under the Programmatic Access section in the documentation.

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

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

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.

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

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

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

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

As described in https://forums.select2.org/t/search-being-unfocused/1203/10 focus is currently broken in the combination of Select2 4.x and JQuery 3.6.0

Two fixes: either downgrade to JQuery 3.5.1 or

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

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.

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

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

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

According to the select2 documentation:

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

Use this sequece:

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