select2 force le focus sur le chargement de la page

J’essaie de faire apparaître une boîte select2 dans son état sur le chargement de la page. J’ai essayé ce qui suit:

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

Seule la première ligne semble avoir un effet, et le champ select2 est focalisé, mais il faut appuyer sur une touche supplémentaire pour afficher le champ de recherche et autoriser la saisie de la chaîne de recherche.

Par conséquent, si vous chargez la page et commencez à taper: “Rechercher”, le “S” ouvrira la boîte de recherche, puis le rest des clés y sera entré, vous chercherez donc “earch”

Selon la documentation de Select2:

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

Devrait être tout ce dont vous avez besoin.

Trouvé sous la section Accès programmatique dans la documentation .

Cela fonctionne dans la version 3.4.2. Pas sûr quand il a été implémenté exactement.

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

Select2 crée sa propre entrée, alors essayez quelque chose comme ceci:

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

Si tu utilises:

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

Le select2 est ouvert et vous pouvez taper directement pour la recherche.

Si tu utilises:

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

Le focus est défini sur la liste déroulante select2 créée. Si vous appuyez sur Enter ou Ctrl + Arrow down sur votre clavier, vous pouvez l’ouvrir.

Est-ce que personnellement pense que c’est mieux que:

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

car vous ne pouvez pas vraiment ouvrir la liste déroulante select2 avec votre clavier.

C’est ce qui a fonctionné pour moi, et il a également placé le curseur clignotant dans le champ de saisie. La commande compte!

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

J’ai essayé les 2 autres réponses mais je n’ai pas eu beaucoup de chance, peut-être parce que je remplis le contrôle via json et au début c’est juste une entrée cachée, donc la méthode open programmatique n’a eu aucun effet.

Cependant, ce qui suit s’est bien passé pour moi:

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

Si pour une raison quelconque vous n’avez pas le même identifiant dans votre configuration, recherchez le contrôle auquel la classe select2-focusser est attachée.

Nous avons eu un champ de texte comme select2 et utilisé l’extrait suivant pour activer et focaliser le curseur dans la saisie de texte. Toutes les autres options ne fonctionnaient pas pour nous, car elles n’ouvraient que les options select2, mais ne produisaient pas le comportement attendu.

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

Sur Select2 4.0, la méthode .select2 (‘focus’) ne fait rien. Cependant, ma solution de contournement consistait simplement à obtenir l’élément “span” avec l’atsortingbut “aria-labelledby” (notez que la valeur est basée sur un identifiant, donc c’est un peu unique), et concentrez-la:

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

Déjà bien répondu par Dan-Nolan mais pour ceux qui sont nouveaux dans Select2, un petit truc à noter: l’object html doit être initialisé avec select2 avant d’appeler ses fonctions:

donc le code final devrait être

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

Sur Select2 4.0.2, j’ai un problème avec select2 (‘focus’). La liste ressemble à concentrée mais lorsque j’appuie sur la liste ENTER, elle n’est pas ouverte.
Pour moi, c’est la solution.

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

Selon la documentation de select2:

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

Utilisez cette séquence:

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