web-dev-qa-db-fra.com

Comment injecter par programme des requêtes de recherche dans Select2 v4?

J'ai créé une application Web à l'aide d'un champ de recherche Select2, qui se connecte à notre backend via AJAX. La zone de recherche transmet la requête (par exemple, "APPLES") au backend, qui met ensuite à jour la page. Comment injecter par programme des requêtes de recherche dans la zone de recherche? J'ai besoin de passer le "val" pour que select2 appelle le backend via AJAX et met à jour la page. Je suis sûr que c'est évident, mais je ne l'ai pas trouvé dans la documentation.

Par exemple, au lieu de forcer un utilisateur à taper "APPLES" dans la zone de recherche, j'aimerais que l'utilisateur clique sur un bouton et que le mot "APPLES" soit automatiquement rempli dans le champ de recherche, puis que la page soit mise à jour.

Merci!

Après le commentaire de Kevin, je ne suis pas dans cet état où le texte est intégré dans la boîte de recherche et le sélecteur a choisi l'élément correct. Comment envoyer (ou déclencher) cette demande, j'ai essayé "keydown", "pressdown", "submit", "click" (qui efface la case), etc.

enter image description here

javascriptjquery-select2jquery-select2-4
23
vgoklani

Select2 fournissait une méthode d'assistance select2('search', 'term') qui aurait aidé à cela, mais elle n'a pas été transférée vers Select2 4.0.0.

Il y a plusieurs façons de procéder, mais en général, elles suivent toutes le même schéma d'étapes

  1. Ouvrez la liste déroulante Select2
  2. Entrez le texte de recherche dans le champ de recherche
  3. Déclenchez les événements de clavier nécessaires pour que Select2 démarre la recherche (généralement input)

Donc, en ce moment, dans Select2 4.0.0, le code pour le faire ressemblerait à

$('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');
});
<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 n'utilise pas AJAX, il déclenchera une demande AJAX si Select2 est configuré pour cela.

38
Kevin Brown

pour moi, le déclenchement de 'keyup' ne fonctionnait que lorsque l'utilisateur n'avait encore sélectionné aucune option. Ce qui fonctionne à chaque fois, c'est plutôt de déclencher une "entrée". (testé uniquement sur Chrome)

donc basé sur la réponse de Kevin Brown:

$('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');
});
7
Marc A.

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

C'est assez idiot, mais ça marche;)

5
Edu

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

Certains des commentaires sur la réponse de Kevin Browns demandaient comment simuler la saisie une fois le texte entré et mis en surbrillance.

J'ai réussi à le faire uniquement avec un timeout:

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

Donc, la solution complète serait la suivante:

$('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');
});
2
sunomad

En complément de cette réponse, nous essayions d'ajouter par programme une nouvelle "balise" à un select2 configuré pour le balisage. Au lieu de déclencher un événement de frappe sur la zone de recherche $, nous avons dû procéder comme suit.

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

Cela déclenche d'abord un événement qui amène le module 'recherche' dans select2 à ajouter un résultat 'surligné' contenant le texte de la balise, puis le deuxième événement fait que select2 déclenche en interne l'événement 'select' qui ajoute une nouvelle balise aux options select2 et peut également déclencher d'autres choses, selon la façon dont vous l'avez configuré.

2
skila