Select2 Ausgabe in einer input-group

[Sharkoon]

Hey zusammen,


habe ein Problem wo ich irgendwie nicht weiter mit komme. Vorab ich nutze Select2 für Suche selbst!
Ich durchsuche normal eine Datenbank, also eine normale Suchfunktion, welche auch geht.

Jetzt das Problem ... Sobald ich ein Item auswähle soll der Datensatz in einer Input-Group angezeigt werden.
Eine ist z.B. für den Usernamen die andere Input-Group soll z.B. die E-Mail anzeigen.

Hier einmal das Script bis jetzt.

<?php
    $user_suche = $pdo->prepare("SELECT id, username, email, handy FROM user ORDER BY id");
    $user_suche->execute([]);
    $user_ergebnis  = $ergebnis_user->fetchAll();
?>
    
<select id="employee-suche" style="width: 550px;">
    <option value=""></option>
        <?php
            foreach($user_ergebnis as $e_user)
            {
                echo '
                    <option class="form-control form-control-sm" value="'.$e_user.'">
                        <i class="icon-arrow-up"></i>
                        '.$e_user['username'].','.$e_user['email'].' - '.$e_user['handy'].'
                    </option>';
            }
          ?>
</select>

und jetzt sobald ich ein Ergebnis anklicke soll z.B. der Username in einer <input> </input> wiedergegeben werden.

<input class="form-control form-control-sm"  type="text" placeholder="" readonly="" disabled="">

Habe schon viel versucht, aber leider komme ich einfach nicht drauf wie es gehen könnte.
Evtl kann mir hier jemand helfen.

*Die Value muss so ausgegeben werden, da sonst keine Ergebnisse angezeigt werden. ->

value="'.$e_user.'"

Grüße

 

[Sharkoon]

Script ist im body Bereich.
Hier einmal das Script bzw der Quellcode des Browsers, dieser nimmt die Daten im dataset Attribut richtig an, aber Sie werden nicht in der Input Group gezeigt. Liegt aber evtl nicht dran das ich Select2 nutze?

<select id="employee-suche" class="form-control select2-single" tabindex="-1" style="width: 550px;">
     <option></option>                                      
         <option class="form-control form-control-sm"
          data-username="Müller"
          data-email="müller@test.de"
          data-handy="4567894163"
          value="1"> // Ist die ID
          <i class="icon-arrow-up"></i>
        Müller,müller@test.de - 4567894163 // Wird im Dropdown Menü angezeigt
     </option>                              
</select>

 

[Sempervivum]

Das ist mir gerade auch siedend heiß eingefallen. Moment, ich aktiviere mal select2 ...

 

[Sempervivum]

Allerdings, mit Select2 funktioniert es nicht. Anscheinend feuert das Event nicht und man muss das Event nehmen, das Select2 zur Verfügung stellt. Dies funktioniert bei mir:

        $('#employee-suche').select2({
            placeholder: "Bitte auswählen ...",
            allowClear: true
        });
        // Das Event feuert wenn eine Option selektiert wurde:
        $('#employee-suche').on('select2:select', function (event) {
            const
                // selektierte Option bereit stellen:
                selected = $('#employee-suche').find(':selected'),
                // Werte für username, email und handy
                // aus den data-Attributen auslesen:
                username = selected.data('username'),
                email = selected.data('email'),
                handy = selected.data('handy');
            console.log(selected, event);
            // und in die Eingabefelder eintragen:
            $('input[name="username"]').val(username);
            $('input[name="email"]').val(email);
            $('input[name="handy"]').val(handy);
        });

 

[Sharkoon]

Danke es funktioniert !!!
Könntest du mir sagen, ob du das irgendwo gefunden hast? Sprich Dokumentation?

 

[Sempervivum]

Ja, steht in der Doku. Suche nach "select2 event change" führt hier hin:
Events | Select2 - The jQuery replacement for select boxes
und um heraus zu bekommen, wie man an die selektierte Option heran kommt, "select2 get selected option" liefert dieses:
Retrieving selections | Select2 - The jQuery replacement for select boxes
Außerdem hatte ich diese Aufgabe früher schon mal und brauchte den Code nur zu kopieren und die ID auszutauschen