Inhalt aus Inputfeld nehmen und Text suchen

Sempervivum · 11. August 2023

Ich habe jetzt ein ZIP mit den Testdateien gemacht. Du musst die Ordner css und js anlegen und die jeweiligen Dateien dort hinein verschieben. Teste es zunächst ohne Fully Kiosk und anschließend mit. Dann werden wir sehen, ob das Select2 funktioniert.

draexler · 12. August 2023

Leider kann ich keine Ordner anlegen.

Habe es mal ohne gemacht. Die Dateien liegen alle im gleichen Verzeichnis.

Bildschirmfoto 2023-08-12 um 00.21.51.png

Habe dann bei deinem Script die Pfade geändert.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Test Select2 für Notenpult Anzeigesteuerung Musikkapelle ORT</title>
    <link rel="stylesheet" href="select2.css">
    <script src="jquery-3.4.1.min.js"></script>
    <script src="select2.js"></script>
    <script>
        $(document).ready(function () {
            $('#test-select2').select2();
        });
    </script>
</head>

<body>
    <select id="test-select2">
        <option value="1">Sternenbanner</option>
        <option value="2">Weil ich dich gerne mag</option>
        <option value="3">Posaunenparade</option>
        <option value="10">Lieblingstück</option>
        <option value="11">Trompetenserenade</option>
        <option value="12">Hinter dem Wald</option>
        <option value="123">Walzerliebe</option>
        <option value="123">Wiener Marsch</option>
        <option value="312">Dixie Land Parade</option>
        <option value="402">Schritt für Schritt</option>
    </select>
</body>

</html>

Alles anzeigen

Im Chrome sieht das Ergebnis so aus.

Passt das?

Bildschirmfoto 2023-08-12 um 00.19.40.png
Im Fully Kiosk sieht es genau so aus.

draexler · 12. August 2023

Kommando zurück...

Ich habe jetzt nochmal das Networklog geprüft...

Er moniert das die select2.css fehlt, in deinen bereitgestellten Dateien ist diese nicht vorhanden. Kannst du die noch bereitstellen? Das wäre super

draexler · 12. August 2023

Ich habe jetzt mal die select2.js in select2.css umbennant (Was vermutlich sicher falsch ist, aber vielleicht kannst du nochmal dein zip überprüfen.

Im Networklog kommen keinerlei Fehler.

Bildschirmfoto 2023-08-12 um 00.44.52.png

Im Fully Kiosk gleiche Anzeige und Bedienung wie im Chrome.

Sempervivum · 12. August 2023

Guten Morgen!

Hier ein neues ZIP, wenn alles funktioniert muss es so aussehen wie auf dem Screenshot.

select2.png

draexler · 12. August 2023

Guten Morgen

Kann Erfolg melden Funktioniert und sieht auf den Fully Kiosk genau so aus wie auf Chrome.

Die Pfade habe ich wieder korrigiert. Macht aber kein Problem

Schon mal wieder vielen DANK!! Guter Start ins Wochenende.

Sempervivum · 12. August 2023

Das ist ja super, dann haben wir dieses Problem auch gelöst. Versuche, das selber in die vollständige Seite zu integrieren und melde dich wenn es nicht klappt.

Ich wünsche ebenfalls ein schönes Wochenende!

draexler · 12. August 2023

Ich probiere es.

Aber schon die die erste Frage: Bis jetzt habe ich ja Eingabefelder mit der Datalist verknüpft:

Code

          <input id="input-liedname-2" style="width:300px;height:20px" list="datalist-lieder" type="text"></label
          <datalist id="datalist-lieder">
          </datalist>

Was muss ich hier abändern?

Was mir auch an dem jetzigen Beispiel aufgefallen ist. Man kann nicht nach Nummer suchen. Wie könnte man das ändern? In den Beispielen auf Select2 finde ich keinen Hinweis.

Sempervivum · 12. August 2023

Bin gerade unterwegs, antworte später.

draexler · 13. August 2023

Danke dir, habe heute auch wieder eine Zeitlang recherchiert. Komme aber nicht so recht weiter

Nach meinen Recherchen gibt es anscheinend keine Möglichkeit mit den Select so zu arbeiten wie mit einer Datalist. Sollte ich damit richtig liegen, würde dies ja heißen ich müsste für alle vier betroffenen Eingabefelder ein Select einfügen und die Werte doppeln...

Ich hoffe ich liege falsch. Wüsste jetzt aber auch nicht nach was ich sonst noch googeln soll.

z.B.

link select to input

several inputs with the same select

etc.

Sempervivum · 14. August 2023

Zitat

Nach meinen Recherchen gibt es anscheinend keine Möglichkeit mit den Select so zu arbeiten wie mit einer Datalist. Sollte ich damit richtig liegen, würde dies ja heißen ich müsste für alle vier betroffenen Eingabefelder ein Select einfügen und die Werte doppeln...

Ja, das trifft zu. Aber die gute Nachricht ist, dass man das automatisch durch das Skript machen kann.

Wir hatten ja zuletzt die Daten in einem Javascript-Objekt ab gelegt:

Code

        const
            liednamen = {
                '1': 'Sternenbanner',
                '2': 'Weil ich dich gerne mag',
                '3': 'Posaunenparade',
                '10': 'Lieblingstück',
                '11': 'Trompetenserenade',
                '12': 'Hinter dem Wald',
                '123': 'Walzerliebe',
                '123': 'Wiener Marsch',
                '312': 'Dixie Land Parade',
                '402': 'Schritt für Schritt'
            }

Alles anzeigen

Daraus kann man problemlos die einzelnen Selects erzeugen.

...

Als ich das so weit geschrieben hatte, fiel mir ein, dass Select2 das schon eingebaut hat, siehe hier:

The Select2 data format | Select2 - The jQuery replacement for select boxes

Gleich der erste Abschnitt.

Dann kann man mit Select2 doch mit einer gemeinsamen Datenquelle arbeiten, nur dass sie dann keine Datalist ist sondern das Javascript-Objekt.

Sempervivum · 14. August 2023

PS: Es war ja die Rede davon, dass es um die 250 Titel sind. Hattest Du die eigentlich alle schon in das JS-Objekt aufgenommen?

draexler · 14. August 2023

Ja das hatte ich auch schon gesehen, mein Problem ist das ich mit Codeschnipseln aus Beispielen mir nicht das ganze große Vorstellen kann.

Was ich schon versucht hatte bei den deinem Select Beispiel die Werte wie wir es schon hatten in ein JS Objekt zu packen:

Code

        const
            liednamen = {
        <option value="1">Sternenbanner</option>
        <option value="2">Weil ich dich gerne mag</option>
        <option value="3">Posaunenparade</option>
        <option value="10">Lieblingstück</option>
        <option value="11">Trompetenserenade</option>
        <option value="12">Hinter dem Wald</option>
        <option value="123">Walzerliebe</option>
        <option value="123">Wiener Marsch</option>
        <option value="312">Dixie Land Parade</option>
        <option value="402">Schritt für Schritt</option>
        }

Alles anzeigen

Und damit dann das select mit mit

Code

                    <select id="liednamen" list="liednamen"  type="text">
                      </select>

zu erzeugen.

Funktioniert natürlich nicht. Puh, ganz schön harte Lernphase für mich gerade.

Ich ärger mich immer noch das das mit der Datalist nicht funktioniert.

Wegen den 250 Titel. Aufgenommen ja, aber zum Testen ist eine kleine feine Liste besser.

Sempervivum · 14. August 2023

Guten Morgen,

hier eine Demo, mit der ich das getestet habe:

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Test Select2 für Notenpult Anzeigesteuerung Musikkapelle ORT</title>
    <link rel="stylesheet" href="css/select2.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/select2.js"></script>
    <script>
        $(document).ready(function () {
            const
                liednamen = {
                    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                    //HIER DÜRFEN ÄNDERUNGEN GEMACHT WERDEN
                    '1': 'Sternenbanner',
                    '2': 'Weil ich dich gerne mag',
                    '3': 'Posaunenparade',
                    '10': 'Lieblingstück',
                    '11': 'Trompetenserenade',
                    '12': 'Hinter dem Wald',
                    '123': 'Walzerliebe',
                    '123': 'Wiener Marsch',
                    '312': 'Dixie Land Parade',
                    '402': 'Schritt für Schritt'
                    //BIS HIER DÜRFEN ÄNDERUNGEN GEMACHT WERDEN
                    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                };

            // Wir konvertieren zunächst das obige Objekt in ein Array
            // mit dem Format, das Select2 braucht
            let data = [];
            for (const [key, value] of Object.entries(liednamen)) {
                data.push({ id: key, text: key + ': ' + value });
            }

            // Jetzt können wir die einzelnen Selects initialisieren
            $('#test-select2-1').select2({
                data: data,
                width: '20em'
            });
            $('#test-select2-2').select2({
                data: data,
                width: '20em'
            });
            $('#test-select2-3').select2({
                data: data,
                width: '20em'
            });
        }); 
    </script>
</head>

<body>
    <select id="test-select2-1">
    </select>
    <select id="test-select2-2">
    </select>
    <select id="test-select2-3">
    </select>
</body>

</html>

Alles anzeigen

Pfade musst Du wieder anpassen.

Wie Du siehst, habe ich das Format der Liste als Ausgangsbasis genommen, das wir bisher hatten. Wenn Du die vollständige Liste mit den 250 Titeln in einem anderen Format hast, brauchst Du sie nicht umzuändern, wir können das sicher automatisch machen.

draexler · 14. August 2023

Super Perfekt und wenn man es sieht leuchtet es ein

Habe das ganze jetzt in das Bestandssript übernommen. Das Funktioniert auch so wunderbar (die select2 implementierung), aber leider kann es nicht abgesendet werden. Es läuft in die "Eingabe nicht korrekt!" Schleife.

Nach meiner Logik sollte es aber so funktionieren.

Broswerlog gibt folgendes aus.

Code

steuerung.html:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

Was es bedeutet verstehe ich, aber ich werde nicht schlau daraus.

Hier mal das komplette .html.

Ich denke mal das wird die letzte Hürde sein, dann heißt es nur noch Anpassungen für das Format damit es über die Kiosk App ordentlich steuerbar ist.

Sempervivum · 14. August 2023

Ich will hoffen, dass wir da nicht wieder in eine Begrenzung von Fully Kiosk laufen wegen Ajax und fetch.

Ich sehe es mir jetzt an.

Sempervivum · 14. August 2023

Glücklicherweise war es (noch) kein Problem mit dem Ajax sondern es lag daran, dass das Auslesen des selektierten Textes bei Select2 etwas anders funktioniert: value liefert nicht den kompletten Text sondern nur die Nummer aber glücklicher Weise haben wir noch unser Objekt mit der Nummer als Schlüssel und können daraus den Titelnamen leicht ermitteln. So wie ich das jetzt gemacht habe, wird das nicht bei manueller Eingabe funktionieren, aber lass es uns erst Mal so zum Laufen bringen.

Es gab dann noch kleinere Probleme mit den Scopes, deshalb habe ich jetzt alles Javascript im document-ready zusammen gefasst, siehe Anhang.

Den inline-Eventlistener kannst Du dann in dem Übertragen-Button löschen:

Code

            <input style="height: 40px; width: 308px; font-size:20px; color:#fafafa; background-color: #1c9407;"
                id="send-it" type="button" value="Übertragen"><br><br>
            <input style="height: 30px; width: 308px; font-size:20px; color:#fafafa; background-color: #cf0a35;"
                type="button" value="Reset" onClick="location.href=location.href">

draexler · 15. August 2023

So ich muss mal wieder vielen, vielen Dank sagen.

Funktioniert wunderbar Super das es so Leute wie dich gibt, die da einen unterstützen. Habe unglaublich viel gelernt dabei.

Jetzt geht es ums hübsch machen und evtl. habe ich noch die ein oder andere kleinere Frage.

Nochmal Danke

Sempervivum · 15. August 2023

Immer wieder gern. Funktioniert es denn jetzt auch im Fully Kiosk?

draexler · 15. August 2023

Ja, funktioniert 👍

Inhalt aus Inputfeld nehmen und Text suchen

Jetzt mitmachen!

Teilen