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

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

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

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

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

42
jquery jquery-select2

12 ответов

согласно документации Select2:

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

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

под Программный Доступ на документация.

104

это работает в версии 3.4.2. Не уверен, когда именно это было реализовано.

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

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

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

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

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

select2 открывается, и вы можете ввести непосредственно для поиска.

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

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

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

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

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

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

8

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

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

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

однако, следующее сделало это просто отлично для меня:

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

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

0

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

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

на Select2 4.0, метод .select2 ("фокус") ничего не делает. Тем не менее, мой обходной путь просто получал элемент "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();
0

уже хорошо ответил Дэн-Нолан, но для тех, кто новичок в Select2 немного отметить: объект html должен быть intialized с select2 перед вызовом его функций:

таким образом, окончательный код должен быть

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

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

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

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

согласно документации select2:

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

используйте этот sequece:

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