Procédure de programmation pour injecter des requêtes de recherche dans Select2 v4?

J'ai construit une application web à l'aide d'un Select2 zone de recherche, qui se connecte à notre backend via AJAX. La zone de recherche transmet la requête (dire "POMMES") à l'arrière-plan, qui met ensuite à jour la page. Comment puis-je par programme injecter des requêtes de recherche dans la case de recherche? J'ai besoin de passer dans le "val", de sorte que select2 appelle le backend via AJAX et les mises à jour de la page. Je suis sûr que c'est évident, mais je ne pouvais pas le trouver dans la documentation.

Par exemple, au lieu de forcer un utilisateur de type "POMMES" dans la zone de recherche, je voudrais que l'utilisateur clique sur un bouton et le mot "POMMES" automatiquement renseigné dans le champ de recherche, puis la page de mise à jour.

Merci!

Suivantes Kevin commentaire, je ne suis pas dans cet état où le texte est intégré dans le "searchbox" et le sélecteur a choisi le bon élément. Comment dois-je soumettre (ou déclencheur) cette demande, j'ai essayé le "keydown", "pressdown", "soumettre", "clic" (ce qui efface la boîte), etc.

Procédure de programmation pour injecter des requêtes de recherche dans Select2 v4?

  • La générosité n'est pas possible, par la voie, car il n'existe aucun moyen de détecter quand la requête AJAX qui est déclenchée se terminer sans accrochage dans le mondial AJAX gestionnaire.
  • Juste pour confirmer, il n'y a pas moyen de forcer le clic?
  • Peu importe, je suis reconnaissant à tous pour votre aide, et que la générosité est la vôtre.
  • Vous pouvez forcer le résultat d'être sélectionné par la simulation de la mouseup événement (ou tout simplement d'injecter de l' <option> si vous avez de l'information), mais vous ne pouvez pas prédire avec exactitude quand la liste des résultats va afficher le résultat.
InformationsquelleAutor vgoklani | 2015-05-28
  1. 35

    Select2 utilisé pour fournir une select2('search', 'term') méthode d'assistance qui aurait aidé avec cela, mais il n'a pas été portée à Select2 4.0.0.

    Il ya un couple de façons de le faire, mais en général ils suivent tous le même schéma des étapes

    1. Ouvrir le Select2 déroulant
    2. Entrez le texte à rechercher dans la zone de recherche
    3. Déclencher les événements de clavier nécessaires pour Choisir 2 pour démarrer la recherche (généralement input)

    Donc, dès maintenant, dans Select2 4.0.0 le code pour le faire pourrait ressembler à

    JS:

    $('select').select2();

function select2_search ($el, term) {
  $el.select2('open');
  
  //Get the search box within the dropdown or the selection
  //Dropdown = single, Selection = multiple
  var $search = $el.data('select2').dropdown.$search || $el.data('select2').selection.$search;
  //This is undocumented and may change in the future
  
  $search.val(term);
  $search.trigger('keyup');
}

$('button').on('click', function () {
  var $select = $($(this).data('target'));
  select2_search($select, 'Arizona');
});

    HTML:

    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select style="width: 200px;" id="single">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<button type="button" data-target="#single">Search for 'Arizona'</button>
<br /><br />

<select style="width: 200px;" id="multiple" multiple="multiple">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<button type="button" data-target="#multiple">Search for 'Arizona'</button>

    Bien que cet exemple ne pas utiliser de l'AJAX, il va déclencher une requête AJAX si Select2 est configuré pour cela.

    • Merci pour la réponse de Kevin. Malheureusement, je ne vois pas l' $recherche variable après l' $e1.de données('select2').liste déroulante. Je fais aussi un appel AJAX, donc select2 ne voit pas tous les ids jusqu'à ce que après la requête AJAX. J'ai travaillé sur cette question depuis quelques jours, j'espère que vous pouvez clarifier les choses. Merci
    • Je dois ajouter que j'ai deux champs de recherche, et un seul est à l'aide d'AJAX. Le non-ajax select2 boîte de poignées injections de façon transparente via $selectionBox.val(23).changement ("trigger"). Je devine que l'AJAX échec de la version car elle n'a pas les identifiants. lorsque j'exécute cette fonction $selectionBoxAJAX.val(47).changement ("trigger"), une mise à jour est poussé (les mises à jour d'écran), mais la requête est vide, et que le texte n'est pas mis à jour
    • Je pense que le problème peut être que vous êtes à l'aide d'une sélection multiple, vous voulez juste de confirmer que (et je peux mettre à jour cette réponse à la soutiennent également).
    • Oui, je suis en utilisant la sélection multiple
    • J'ai mis à jour ma réponse à fonctionner pour plusieurs sélectionne en tant que bien, et a fourni un exemple pour eux.
    • Merci Kevin, c'est presque là! Le texte est maintenant dans la boîte de sélection et est mis en surbrillance dans la liste déroulante, ce qui est le "déclencheur" pour en faire soumettre?
    • J'ai ajouté une image à vous montrer exactement où je suis bloqué. Merci encore pour votre aide!
    • Ce n'est pas complète, comment simuler une ENTRÉE par la suite pour la liste déroulante accepte la chaîne entrée et ferme?
    • Ainsi, le trigger('keyup') n'a rien fait pour moi, j'ai fini par utiliser s2Obj.trigger('query', {terme:terme}); pour déclencher une recherche avec le terme que je voulais
    • selon @goyote commentaire/question - "comment pouvez-vous simuler une ENTRÉE par la suite pour la liste déroulante accepte la chaîne entrée et ferme" - il a été répondu quelque part ?
    • Je peux simuler l'ENTRÉE avec $('.choisir 2-résultats__option[aria-sélectionné]') .trigger("mouseup");

    InformationsquelleAutor Kevin Brown
  2. 7

    pour moi de déclenchement 'keyup' ne travaille que lorsque l'utilisateur n'a pas de sélectionner une option encore. Ce qui fonctionne à chaque fois, c'est à seuil de déclenchement d'entrée " à la place. (testé uniquement sur Chrome)

    sur la base de Kevin Brown réponse:

    $('select').select2();

function select2_search ($el, term) {
  $el.select2('open');

  //Get the search box within the dropdown or the selection
  //Dropdown = single, Selection = multiple
  var $search = $el.data('select2').dropdown.$search || $el.data('select2').selection.$search;
  //This is undocumented and may change in the future

  $search.val(term);
  $search.trigger('input');
}

$('button').on('click', function () {
  var $select = $($(this).data('target'));
  select2_search($select, 'Arizona');
});
    InformationsquelleAutor Marc A.
  3. 5

    Vous pouvez définir minimumInputLength à 0 puis dans le data fonction, vous pouvez vérifier params.term length et si c'est 0, définissez le filtre de la valeur à votre recherche prédéfinie de la valeur.

    C'est tout à fait stupide, mais ça fonctionne 😉

    • C'est ce que je cherchais! Merci pour "minimumInputLength: 0" suggestion. Ma tâche était de pré-remplir select2 avec des données initiales avec appel ajax. Donc, tout ce que j'ai à faire est de définir d'entrée minimum de 0 et de filtrer demande vides OBTENIR param "q=" sur le serveur et le retour des valeurs par défaut. Génial!
    InformationsquelleAutor Edu
  4. 2

    Comme un complément à cette réponse, nous avons essayé de programmation pour ajouter un nouveau tag à un select2 configuré pour le marquage. Plutôt que de déclencher un événement keyup sur $de la zone de recherche, nous avons dû faire le suivant.

    $search.val(tag);
$search.closest('.select2-search--inline')
    .trigger($.Event('input', { which: 13 }));
$search.closest('.select2-selection--multiple')
    .trigger($.Event('keydown', { which: 13 }));

    Cette première déclenche un événement qui provoque la "recherche" module en choisir 2 pour ajouter un en surbrillance résultat contenant le texte de l'étiquette, puis le deuxième événement à l'origine de select2 à feu "sélectionnez" événement interne qui ajoute une nouvelle balise pour le choisir 2 options, et peuvent également déclencher d'autres choses, selon la façon dont vous avez configuré.

    • Événement clé qui déclenche bloqué par le navigateur comme de 2019 pour des raisons de sécurité
    InformationsquelleAutor skila
  5. 2

    Les réponses sur cette page m'a presque là. Et parce que d'autres semblent avoir les mêmes problèmes, je vais partager comment je l'ai résolu.

    Certains commentaires sur Kevin Browns de réponse demandé comment faire pour simuler l'ENTRÉE après le texte a été saisi et est mis en évidence.

    J'ai réussi à le faire qu'avec un délai d'attente: 

    setTimeout(function() { $('.select2-results__option').trigger("mouseup"); }, 500);

    Donc, la solution complète est celle-ci: 

    $('select').select2();

function select2_search ($el, term) {
  $el.select2('open');

  //Get the search box within the dropdown or the selection
  //Dropdown = single, Selection = multiple
  var $search = $el.data('select2').dropdown.$search || $el.data('select2').selection.$search;
  //This is undocumented and may change in the future

  $search.val(term);
  $search.trigger('input');
  setTimeout(function() { $('.select2-results__option').trigger("mouseup"); }, 500);

}

$('button').on('click', function () {
  var $select = $($(this).data('target'));
  select2_search($select, 'Arizona');
});
    InformationsquelleAutor sunomad