web-dev-qa-db-fra.com

select2 force le focus sur le chargement de la page

J'essaie de faire apparaître une zone select2 dans son état driven lors du chargement de la page. J'ai essayé ce qui suit:

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

Seule la première ligne semble avoir un effet quelconque, et elle focalise le champ select2; toutefois, une pression supplémentaire est nécessaire pour afficher le champ de recherche et permettre la saisie dans la chaîne de recherche.

Par conséquent, si vous chargez la page et commencez à taper: "Rechercher", le "S" ouvrira le champ de recherche, puis le reste des clés y sera entré. Vous effectuerez donc une recherche dans "earch"

jqueryjquery-select2
43
user984976

Selon la documentation Select2: 

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

Devrait être tout ce dont vous avez besoin.

Trouvé dans la section Programmatic Access de la documentation .

110
Dan-Nolan

Cela fonctionne dans la version 3.4.2. Je ne sais pas quand cela a été mis en œuvre exactement.

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

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

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

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

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

8
Ralph Jansen

C'est ce qui a fonctionné pour moi et cela a également placé le curseur clignotant dans le champ de saisie. L'ordre compte!

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

Nous avions un champ de texte sous la forme select2 et utilisions le fragment de code suivant pour activer le curseur dans le texte saisi. 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()

0
NielsH

Selon la documentation de select2: 

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

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'attribut "aria-labelledby" (notez que la valeur est basée sur l'id, elle est donc unique) et concentrez-vous:

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

Déjà bien répondu par Dan-Nolan mais pour ceux qui sont nouveaux à Select2, une petite chose à noter: l'objet HTML doit être initialisé avec select2 avant d'appeler ses fonctions:

donc le code final devrait être

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

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

Sur Select2 4.0.2 J'ai un problème avec select2 ('focus'). La liste semble ciblée mais lorsque j'appuie sur ENTREE, la liste n'est pas ouverte.
Pour moi c'est la solution.

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

J'ai essayé les 2 autres réponses mais n'ai pas eu beaucoup de chance, peut-être parce que je remplis le contrôle via json et qu'au début, il s'agit simplement d'une entrée cachée, de sorte que la méthode open programmatique n'a aucun effet. 

Cependant, les éléments suivants ont bien fonctionné pour moi: 

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

Si, pour une raison quelconque, le même identifiant n'apparaît pas dans votre configuration, recherchez le contrôle auquel la classe select2-focusser est associée.

0
gts