Datalist mit vorherigem Dropdown verknüpfen

[Auge]

Hallo

Für den Anwender ist es wohl angenehmer, wenn die Auswahl der Produkte nach der Auswahl der Kategorie funktioniert, ohne die Seite zwischendurch abgeschickt und neugeladen haben zu müssen.

So ist es. Die Übersicht gibt alle Stecker an, rund 600, und nicht jeder kennt die Hersteller oder weiß wie diese geschrieben werden daher die Datalist, bei der Artikelnummer ist es aber eher unpraktisch jeden Hersteller zu sehen bzw. jede Artikelnummer auszuählen. Dafür ist die Eingabe praktisch da niemand nach einer Artikelnummer sucht, wenn er diese nicht kennt.

Auf dem Server läuft PHP, wäre für mich auch die beste Lösung, da ich mich eher damit auseinander gesetzt habe als mit den restlichen.

Ich habe (im folgenden zitiert) nur eine (mehr oder minder typische) Auswahl an serverseitigen Sprachen aufgelistet. Du wirst normalerweise nur eine Sprache benutzen.

Es wird damit auf eine Kombination von browser- und serverseitigen Techniken (JavaScript in Browser; PHP, Perl, Python oder sonstwas auf dem Server) hinauslaufen.

1. Packe alle Produkte in die Datalist der Produktauswahl.
2. Schicke ein Array aller Produkte in für JS lesbarer Form mit, um nach der Auswahl der Kategorie die Datalist der Produktauswahl passend zu bestücken. Wie genau ist das gemeint, kenne mich nicht wirklich mit Javascript aus

Fall 1

Die HTML-Ausgabe wird auf dem Server mit PHP zusammengebaut. Es wird eine Datalist mit allen 600 Steckern an das zugehörige Input-Element gehängt. Die Liste enthält jede mögliche Auswahl, ist aber entsprechend lang und wohl auch unübersichtlich. Hier ist nach der Auslieferung des HTML-Dokuments keine weitere Programmlogik involviert, aber schön ist anders.

Fall 2

Die HTML-Ausgabe enthält, wenn sie nach Aufruf an den Browser versendet wird, keine Datalist. Allerdings wird auf dem Server eine für JavaScript lesbare Liste aller 600 Stecker erzeugt und dem HTML-Dokument beigefügt (als per script verlinkte JS-Datei oder als JS-Block hartkodiert im HTML-Dokument). Wenn der Besucher die Auswahl des Herstellers getroffen hat, wird mit JavaScript die Datalist mit der passenden Auswahl von Produkten erzeugt und an das zugehörige Input-Element gehängt.

Fall 3

Die HTML-Ausgabe enthält, wenn sie nach Aufruf an den Browser versendet wird, keine Datalist. Wenn der Besucher die Auswahl des Herstellers getroffen hat, wird mit JavaScript eine Anfrage an den Webserver gestellt (Stichworte „Fetch-API“, „Ajax“), um sich von einem PHP-Skript die Liste der Produkte der ausgewählten Firma liefern zu lassen. Diese wird dann als Datalist an das zugehörige Input-Element gehängt.

Fall 4

Die HTML-Ausgabe enthält, wenn sie nach Aufruf an den Browser versendet wird, keine Datalist. Wenn der Besucher die Auswahl des Herstellers getroffen hat, wird das Formular an den Server abgeschickt, wo daraufhin an das Input-Element für die Produkte per PHP-Skript die Datalist angehängt wird.

---

Im Fall 4 wird nur PHP benötigt, aber das Formular muss zwischendurch halt auch abgesendet werden. Der Unterschied zwischen den Fällen 2 und 3, in denen (unter anderem) auf JavaScript gesetzt wird, ist der Zeitpunkt, wann die Liste der zur Herstellerauswahl passenden Produkte vom Server geholt wird und der Umfang der Liste und damit die Größe der Datenübertragung. Ansonsten gleichen sich diese beiden Fälle. Es wird eine nach Herstellern gefilterte Produktpalette bereitgestellt, die per JS ins Dokument eingebaut wird.

Nachteil der Technik in Fall 2 ist die Bereitstellung aller Produkte aller Hersteller bei Auslieferung des HTML-Dokuments, obwohl der Benutzer wahrscheinlich nur Ausschnitte der vollständigen Produktliste benötigt, Vorteil gegenüber Fall 3 und Fall 4 ist der Umstand, dass in diesen Fällen eine oder mehrere weitere Anfragen an den Webserver notwendig sind. Es ist abzuwägen, ob der Nachteil der größeren initialen Datenmenge in Fall 2 hinnehmbar ist, weil die für die Fälle 3 und 4 benötigte höhere Ausfallsicherheit in der Datenverbindung (Einkauf auf Reisen im „Zusammenspiel“ mit Funklöchern) nicht sichergestellt werden kann oder ob man den Kunden nach einem Funkloch den Hersteller ein zweites Mal auswählen lässt, dafür aber sein Datenkontingent schont.

Tschö, Auge

PS: edit Satzbau korrigiert