Select2 Ausgabe in einer input-group

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Sharkoon

Mitglied
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:
<?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.
Code:
<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. ->
PHP:
value="'.$e_user.'"

Grüße
 

Sempervivum

Erfahrenes Mitglied
Hallo Sharkoon, man könnte daran denken, das '.$e_user['username'].','.$e_user['email'].' - '.$e_user['handy'].'mit Regex zu zerlegen und dabei das Komma und das Minus als Trennzeichen zu benutzen. Wäre aber IMO nicht besonders elegant. Prüfe doch zuvor, ob Du die Werte einzeln in data-Attribute eintragen kannst:
Code:
               echo '
                    <option class="form-control form-control-sm"
                        data-username="'.$e_user['username'].'"
                        data-email="'.$e_user['email'].'"
                        data-handy="'.$e_user['handy'].'"
                        value="'.$e_user.'">
                        <i class="icon-arrow-up"></i>
                        '.$e_user['username'].','.$e_user['email'].' - '.$e_user['handy'].'
                    </option>';
 

Sempervivum

Erfahrenes Mitglied
Das geht mit dataset:
HTMLElement.dataset - Web APIs | MDN
Könnte dann so aussehen:
Code:
document.getElementById('employee-suche').addEventListener('change', event => {
    // event.target ist in diesem Fall das Select, in dem eine Option ausgewählt wurde

    const username = event.target.options[event.target.selectedIndex].dataset.username;
    document.querySelector('input[name="username"]').value = username;

    const email = event.target.options[event.target.selectedIndex].dataset.email;
    document.querySelector('input[name="email"]').value = email;

    const handy = event.target.options[event.target.selectedIndex].dataset.handy;
    document.querySelector('input[name="handy"]').value = handy;

});
Ungetestet, versuche, ob Du es zum Laufen bekommst und wenn nicht,melde dich wieder.
 

Sharkoon

Mitglied
Habe mir den Link angeschaut und durchgelesen, aber wirklich schlau durch werde ich nicht gerade..
Leider funktioniert dein Code nicht bzw denke eher ich habe es nicht richtig gemacht ...:cry:
 

Sempervivum

Erfahrenes Mitglied
Mein Code baut darauf auf, dass es Eingabefelder gibt wo das name-Attribut gleich dem Namen des data-Attributs ist. Das setzt natürlich voraus, dass Du die Optionen des Select so geändert hast, wie ich das in Posting #2 beschrieben habe. D. h. das Eingabefeld für email muss so aussehen:
<input name="email">
und die anderen entsprechend.
Wenn das alles passt und es funktioniert nicht, dann poste das HTML aus der Quelltextansicht des Browsers, das Select und die Inputs wo die Werte hinein sollen. Ich würde es dann austesten.
 

Sharkoon

Mitglied
Habe alles so wie geschrieben, aber leider passiert nichts.

Hier einmal der Quellcode der im Browser angezeigt wird, aber bis jetzt habe ich es immer nur mit einem Datensatz versucht. Also er sollte den Usernamen in der Input-Group anzeigen.

HTML:
<div class="input-group">
    <span class="input-group-text" style="color: rgb(255,255,255);background: rgb(78, 115, 223);font-size: 13px;width: 104.516px;">Username</span>
    <input class="form-control form-control-sm" type="text"  name="username" readonly="" disabled="">
</div>

PHP Code sieht wie folgt aus
PHP:
<?php
foreach($user_result as $e_user)
{
 echo '
<option class="form-control form-control-sm"
data-username="'.$e_user['username'].'"
data-email="'.$e_user['email'].'"
data-handy="'.$e_user['handy'].'"
value="'.$ee_user['id'].'">
<i class="icon-arrow-up"></i>
'.$e_user['username'].','.$e_user['email'].' - '.$e_user['handy'].'
</option>';
?>
 

Sempervivum

Erfahrenes Mitglied
Das Eingabefeld mit name="username" sieht gut aus. Hast Du die für email und handy auch schon? Wenn nicht, kommt es zu einem Fehler im Skript. Ich werde das jetzt auch mal testen, vielleicht ist noch ein blöder Fehler drin ...
 

Sempervivum

Erfahrenes Mitglied
Ein Kandidat für die Ursache ist die Position des Javascript: Stelle es an das Ende des Body, vor das schließende </body>. Wenn es dann immer noch nicht funktioniert, dann post noch Mal das HTML des Select, aber nicht das PHP sondern das generierte HTML aus der Quelltextansicht des Browsers.
Dies funktioniert bei mir:
Code:
<body>
    <input name="username">
    <input name="email">
    <input name="handy">
    <select id="employee-suche" style="width: 550px;">
        <option class="form-control form-control-sm" data-username="ulli" data-email="ulli@gmx.de" data-handy="12345678"
            value="user-ulli">ulli
        </option>
        <option class="form-control form-control-sm" data-username="henry" data-email="henry@gmx.de"
            data-handy="98765432" value="user-henry">henry
        </option>
    </select>
    <script>
        document.getElementById('employee-suche').addEventListener('change', event => {
            // event.target ist in diesem Fall das Select, in dem eine Option ausgewählt wurde

            const username = event.target.options[event.target.selectedIndex].dataset.username;
            document.querySelector('input[name="username"]').value = username;

            const email = event.target.options[event.target.selectedIndex].dataset.email;
            document.querySelector('input[name="email"]').value = email;

            const handy = event.target.options[event.target.selectedIndex].dataset.handy;
            document.querySelector('input[name="handy"]').value = handy;

        });
    </script>
</body>
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…