Datalist Verwirrung

[Zumbibaer]

Hallo Html & Co. Community,

ich bin noch recht neu in der Html/JS/PhP/CSS Programmierung und hoffe ihr könnt mir Anzeichen von 'Fails' verzeihen.
Es ergab sich nun durch Tests durch verschiedene Browser das Problem, dass das Html-5 Element "input-list" in Verbindung mit der datalist zu einigen Probleme führt, vorallem in Google Chrome.
In meinem Projekt ist es unbedingt von Nöten das der Benutzer nach Elementen in der Liste "suchen" kann, indem er etwas eingibt und darunter eine Auswahl entsteht welche die Eingabe genauer eingrenzen. Dies habe ich mit dem alten select-Element nicht geschafft, da ich dort garnichts eingeben konnte.
Nun zum Problem (endlich):

• In Chrome hat eine wichtige Liste mit mehr als 300 Einträgen keine Scrollbar. Das Dropdown-Fenster schiesst einfach über den Bildschirmrand hinweg.

Das ist alles? Ja! Aber für mich ein riesen Problem.
Nun ich habe natürlich schon im Internet nach einer Lösung gesucht aber da das Datalist-Element noch recht neu zu sein scheint, gibt es in diversen Browsern noch Probleme bzw. Anpassungsschwierigkeiten? Könnt ihr als Profis dem zustimmen oder mache ich einfach nur etwas falsch?

Wenn nicht, habt ihr eine vergleichbare Lösung für mich?
Folgendes muss möglich sein:

• Liste muss im nachhinein verändert werden können (Datenbankabfrage - JS->PHP)
• Autocomplete (Nicht das was Html unter autocomplete versteht.. das ist für mich eher ein "Datenspeichern" oder so. Ich habe mir dazu im moment bei "oninput" eine Funktion hinterlegt die die Eingabe überprüft und Groß/Klein-Schreibung ignoriert und so trotzdem ein Element aus der Liste nimmt, sollte es vorhanden sein.
  Beispiel: Elemente in der Liste: BaUmHaUs, HausBaum
  Wenn ich nun "baumhaus" einegebe, wird dies als nicht vorhanden interpretiert. Daher die Funktion die mir dies umsetzt und ein für mich richtiges autocomplete "macht".
  
• Es muss möglich sein mehrere Werte (2) pro Auswahl-Element zu sichern. Ich arbeite grundsätzlich nur mit internen ID's (Integer) in meiner Datenbank (Primary/Foreign Keys) und müsste ansonsten für jedes ausgewählte Element eine weitere SQL-Anfrage an den Server schicken nur um die ID herauszufinden. Momentan speichere ich diese mit in der Datalist ab, unsichtbar für den Benutzer.
• Edit: Es muss nur beim drüberschauen ersichtlich sein ob es sich hierbei um eine Liste handelt. Sprich das schöne Drodown-Dreieck an der rechten Seite sollte möglich sein. Aber ist im Notfall ja auch über CSS einfügbar (btw.. das wäre bei Firefox eines meiner Probleme.. es war nicht vorhanden, musste es nachträglich für Firefox reinbasteln)

Vielen Dank fürs lesen :)

Liebe Grüße

Zumbibaer

 

[Tronjer]

n Chrome hat eine wichtige Liste mit mehr als 300 Einträgen keine Scrollbar. Das Dropdown-Fenster schiesst einfach über den Bildschirmrand hinweg.

Du willst doch nicht ernsthaft dem User eine statische Dropdown-List mit 300 Zeilen zumuten?

Autocompletes gibt es als Plugins für diverse JavaScript-Frameworks. Du solltest dir eines davon aussuchen und gegebenenfalls deinen Wissensstand vorher erweitern.

 

[Zumbibaer]

Nunja.. bisher 300 - ggf. steigt dieser Wert noch exponential an. Aber da führt kein Weg herum.
Die Frage die sich mir nun stellt was meinst du genau mit statischer Dropdown-List? Für mich ist eine aus der Datenbank generierte Liste nicht statisch?! Sorry :/

 

[Tronjer]

Ich meinte das Data-List Attribut. Bei einem Autocomplete werden nicht alle Suchbegriffe angezeigt, sondern nur diejenigen, welche der Eingabe entsprechen.