Wie Sie programmgesteuert injizieren Suchanfragen in Select2 v4?

Hab ich baute eine web-app mit einem Select2-search-box, die Verbindung zu unserem backend via AJAX. Die Suche im Feld übergibt der Abfrage (z.B. "ÄPFEL") im backend, die dann aktualisiert die Seite. Wie kann ich programmgesteuert injizieren Suchanfragen in das Suchfeld ein? Ich übergeben zu müssen, in die "val", so dass select2 ruft die backend via AJAX und aktualisiert die Seite. Ich bin sicher, das ist offensichtlich, aber ich konnte ihn nicht finden in der Dokumentation.

Beispielsweise stattdessen zwingen Sie einen Benutzer, geben Sie "ÄPFEL" in das Suchfeld ein, ich möchte, dass der Benutzer auf eine Schaltfläche klickt und das Wort "ÄPFEL" automatisch in das Suchfeld ein, und haben dann die Seite aktualisieren.

Dank!

Folgenden Kevin ' s Kommentar, ich bin nicht in diesem Zustand, in dem der text eingebettet ist in die Suchbox und die Auswahl gepflückt hat, das richtige Element. Wie reiche ich (oder trigger) mit diesem Antrag, ich habe versucht, "keydown", "pressdown", "Absenden", "klicken" (das löscht die box), etc.

Die bounty ist nicht möglich, durch die Art und Weise, weil es keine Möglichkeit gibt, zu erkennen, wenn der AJAX-request ausgelöst wird, wird fertig, ohne Einhängen in die Globale AJAX-handler.
Nur um zu bestätigen, es gibt keine Möglichkeit, zu erzwingen, die click-through?
Egal, ich bin dankbar für all Ihre Hilfe, und die bounty ist dein.
Sie können erzwingen, dass das Ergebnis ausgewählt werden, um durch Simulation die mouseup Veranstaltung (oder einfach nur das Spritzen des <option> wenn Sie die information), aber man kann nicht Vorhersagen, (genau), wenn die Ergebnis-Liste wird um das Ergebnis anzuzeigen.

InformationsquelleAutor vgoklani | 2015-05-28

34

Select2 verwendet, um eine select2('search', 'term') Helfer-Methode, die würde assistiert haben, aber war es nicht über sich gebracht, zu Select2 4.0.0.

Gibt es ein paar Möglichkeiten, wie dies getan werden könnte, aber im Allgemeinen Sie alle Folgen dem gleichen Muster der Schritte
1. Öffnen der Select2 dropdown -
2. Geben Sie den Suchtext in das Suchfeld
3. Trigger die Tastatur-Ereignisse, die nötig sind für Select2 um die Suche zu starten (in der Regel input)
Also, gerade jetzt, in der Select2 4.0.0 der code dazu Aussehen würde

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>
```
Während dieses Beispiel nicht AJAX verwenden, es löst einen AJAX-request, wenn Select2 so konfiguriert ist, dass es.
- Dank für die Antwort Kevin. Leider sehe ich nicht, die $search Variablen nach $e1.data('select2').dropdown-Menü. Ich bin auch damit einen AJAX-Aufruf, so select2 sehen nicht alle ids erst nach dem AJAX-request. Ich habe diese für ein paar Tage, hoffentlich können Sie klären die Dinge. Dank
- Ich sollte hinzufügen, dass ich zwei Felder suchen, und nur einer ist unter Verwendung von AJAX. Die nicht-ajax-select2-box-Griffe Injektionen nahtlos über $selectionBox.val(23).ändern ("trigger"). Ich vermute, dass die AJAX-version schlägt da nicht die ids. wenn ich diese Funktion ausführen $selectionBoxAJAX.val(47).ändern ("trigger"), ein update wird gedrückt (der Bildschirm-updates), aber die Abfrage ist leer, und den richtigen text nicht aktualisiert
- Ich denke, das Problem könnte sein, dass Sie eine mehrfach-Auswahl, will nur bestätigen, dass (und ich kann das update diese Antwort auch unterstützen).
- Ja, ich bin mit mehreren select
- Ich aktualisiert meine Antwort an die Arbeit für mehrere wählt, und enthalten ein Beispiel für Sie.
- Danke Kevin, es ist fast da! Der text ist nun in der Auswahl-box und markiert in der dropdown-Liste was ist der "Auslöser", um es einzureichen?
- Ich fügte hinzu, ein Bild, um Ihnen genau, wo ich stecken geblieben bin. Danke nochmal für Eure Hilfe!
- Das ist nicht vollständig, wie simuliert man ein ENTER danach, so der dropdown akzeptiert die eingegebene Zeichenfolge und schließt?
- So, der trigger('keyup') nichts für mich, ich landete mit s2Obj.trigger('query', {term:term}); zum auslösen der Suche mit dem Begriff wollte ich
- laut @goyote Kommentar/Frage - "wie simuliert man ein ENTER danach, so der dropdown akzeptiert die eingegebene Zeichenfolge und schließt" - es war irgendwo beantwortet ?
- Ich kann simulieren, GEBEN Sie mit $('.select2-Ergebnisse__option[aria-selected]') .trigger("mouseup");
InformationsquelleAutor Kevin Brown

mir auslösen 'keyup' funktionierte nur, wenn der Benutzer nicht wählen Sie jede option noch. Was funktioniert bei jedem auslösen 'input' statt. (nur getestet auf Chrome)

also basierend auf Kevin Brown ' s Antwort:

$('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.

4

Können Sie festlegen minimumInputLength zu 0 dann in der data Funktion können Sie überprüfen params.term length und wenn es 0 setzen Sie den filter-Wert auf den vordefinierten Wert haben.

Es ist ziemlich albern, aber es funktioniert 😉
- Dies ist, was ich gesucht habe! Vielen Dank für die "minimumInputLength: 0" Vorschlag. Meine Aufgabe war es, die pre-bevölkern select2 mit einigen anfänglichen Daten mit ajax-call. Also alles, was ich tun müssen, ist, um minimalen input zu 0 und zu filtern Wunsch mit leeren GET-Parameter "q=" auf dem server und default-Werte zurück. Genial!
InformationsquelleAutor Edu
2

Als Ergänzung zu dieser Antwort, haben wir versucht, programmgesteuert fügen Sie einen neuen " tag " ein select2 konfiguriert für die Kennzeichnung. Statt der Auslösung eines keyup-Ereignis aus, auf das $Feld Suche, wir hatten das folgende zu tun.
```
$search.val(tag);
$search.closest('.select2-search--inline')
    .trigger($.Event('input', { which: 13 }));
$search.closest('.select2-selection--multiple')
    .trigger($.Event('keydown', { which: 13 }));
```
Diesem ersten feuert ein Ereignis, das bewirkt, dass die 'Suche' Modul select2 zum hinzufügen einer 'markierten' Ergebnis, mit dem tag text ein, dann das zweite Ereignis verursacht select2 Feuer der 'select' - Ereignis intern, fügt ein neues tag zu den select2 Optionen und kann auch Auslöser andere Sachen, je nachdem, wie Sie es konfiguriert haben.
- Schlüssel-Ereignis-Trigger blockiert vom browser ab 2019 für Sicherheits-Grund
InformationsquelleAutor skila

Den Antworten auf dieser Seite, hab mich fast da. Und weil andere scheinen die gleichen Probleme haben, bin ich teilen, wie ich es gelöst.

Einige der Kommentare auf Kevin Browns Antwort gefragt, wie simulieren Sie die EINGABETASTE, nachdem Sie den text eingegeben wurde und markiert ist.

Ist mir gelungen, nur mit einem timeout:

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

So, die volle Lösung wäre diese:

$('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

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.