jquery - change - select2 forzar el foco en la carga de la página

select2 refresh

Question

Estoy tratando de hacer que un cuadro select2 aparezca en su estado enfocado en la carga de la página. He probado lo siguiente:

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

Solo la primera línea parece tener algún efecto, y enfoca el campo select2, sin embargo, requiere una pulsación de tecla adicional para mostrar el campo de búsqueda, y para permitir el tipeo en la cadena de búsqueda.

Por lo tanto, si carga la página y comienza a escribir: "Buscar", la "S" abrirá el cuadro de búsqueda y luego se ingresará el resto de las teclas, por lo que buscará "buscar"

Answer 1

Dan-Nolan ya lo contestó bien, pero para aquellos que son nuevos en Select2 hay que tener en cuenta algo: el objeto html debe inicializarse con select2 antes de llamar a sus funciones:

por lo que el código final debe ser

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

Answer 2

De acuerdo con la documentación de Select2:

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

Debería ser todo lo que necesitas

Se encuentra en la sección Acceso programático en la documentation .

Answer 3

De acuerdo con la documentación de select2:

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

Answer 4

En Select2 4.0, el método .select2 (''focus'') no hace nada. Sin embargo, mi solución fue simplemente obtener el elemento ''span'' con el atributo "aria-labelledby" (observe que el valor está basado en id, por lo que es algo único), y concéntrelo:

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

Answer 5

En Select2 4.0.2 tengo un problema con select2 (''focus''). La lista parece enfocada, pero cuando presiono ENTER, la lista no está abierta.
Para mí esa es la solución.

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

Answer 6

Esto es lo que funcionó para mí, y también colocó el cursor parpadeante en el campo de entrada. ¡El orden importa!

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

Answer 7

Esto funciona en la versión 3.4.2. No estoy seguro de cuándo se implementó exactamente.

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

Answer 8

Intenté las otras 2 respuestas pero no tuve mucha suerte, tal vez porque llené el control a través de json y al principio solo es una entrada oculta por lo que el método abierto programático no tuvo ningún efecto.

Sin embargo, lo siguiente me pareció bien:

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

Si por algún motivo no tiene la misma identificación en su configuración, busque el control que tiene la clase select2-focusser conectada.

Answer 9

Select2 crea su propia entrada, así que intente algo como esto:

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

Answer 10

Si utiliza:

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

Se abre select2 y puede escribir directamente para buscar.

Si utiliza:

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

El foco se establece en la lista desplegable de selección2 seleccionada. Si presiona Enter o Ctrl + Arrow down en su teclado, puede abrirlo.

Es personalmente, creo que esto es mejor que:

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

porque realmente no puedes abrir la lista desplegable select2 con tu teclado.

Answer 11

Teníamos un campo de texto como select2 y utilizamos el siguiente fragmento para activar y centrar el cursor en la entrada de texto. Todas las demás opciones no nos funcionaron, ya que solo abrían las opciones de Select2, pero no producían el comportamiento esperado.

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

Answer 12

Usa esta secuencia:

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