Select2 force focus на загрузке страницы

Я пытаюсь сделать поле select2 в его сфокусированном состоянии при загрузке страницы. Я пробовал следующее:

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

Только первая строка, похоже, имеет какой-либо эффект, и она фокусирует поле select2, однако для отображения поля поиска требуется дополнительное нажатие, а также возможность ввода текста в строке поиска.

Поэтому, если вы загружаете страницу и начинаете вводить текст: "Поиск", "S" откроет окно поиска, а затем в него будут введены остальные ключи, поэтому вы будете искать "earch"

Ответы

Ответ 1

В соответствии с документацией select2:

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

Должно быть все, что вам нужно.

Найдено в разделе Программный доступ в документации.

Ответ 2

Это работает в версии 3.4.2. Не уверен, когда он был выполнен точно.

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

Ответ 3

Select2 создает свой собственный вход, поэтому попробуйте что-то вроде этого:

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

Ответ 4

Если вы используете:

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

Выбор2 открывается, и вы можете вводить его непосредственно для поиска.

Если вы используете:

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

В фокусе установлен созданный выпадающий список select2. Если вы нажмете Enter или Ctrl + Arrow down на клавиатуре, вы можете открыть его.

Я лично считаю, что это лучше, чем:

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

потому что вы не можете открыть раскрывающийся список select2 с помощью клавиатуры.

Ответ 5

Это то, что сработало для меня, и также поместило мигающий курсор в поле ввода. Вопросы для заказа!

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

Ответ 6

Я попробовал другие 2 ответа, но мне не повезло, может быть, потому, что я заполняю элемент управления через json и вначале это просто скрытый ввод, поэтому программный открытый метод не имел никакого эффекта.

Однако для меня это было просто отлично:

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

Если по какой-то причине у вас нет одного и того же идентификатора в вашей настройке, тогда найдите элемент управления, к которому прикреплен класс select2-focusser.

Ответ 7

Мы имели текстовое поле как select2 и использовали следующий фрагмент, чтобы активировать и сфокусировать курсор в текстовом вводе. Все остальные варианты не сработали для нас, поскольку они только открывали опции select2, но не вызывали ожидаемого поведения.

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

Ответ 8

В Select2 4.0 метод .select2 ('focus') ничего не делает. Тем не менее, моим решением было просто получить элемент "span" с атрибутом "aria-labelledby" (обратите внимание, что значение основано на id, поэтому оно является уникальным) и сосредоточьте его:

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

Ответ 9

Уже хорошо ответил Dan-Nolan, но для тех, кто новичок в Select2, нужно отметить: объект html должен быть проиндексирован с помощью select2 перед вызовом его функций:

поэтому окончательный код должен быть

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

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

Ответ 10

On Select2 4.0.2 У меня проблема с select2 ('focus'). Список выглядит как сфокусированный, но когда я нажимаю ENTER, список не открывается.
Для меня это решение.

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

Ответ 11

В соответствии с документацией select2:

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

Ответ 12

Используйте этот сегмент:

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