HTML5: Suchvorschläge mit datalist

[Matthias Scharwies]

Hallo Rolf,

Ich nehme an, dass ein bedienbares Suchfeld nicht ganz trivial ist und über eine einfache Reaktion auf Pfeiltasten hinausgeht…

Trotzdem würde ich hier nicht versuchen Bestehendes zu kopieren, sondern einen klaren HTML5-Aufbau zu planen.

Im 2019er Thread wird das Wort datalist 29x erwähnt, in diesem Thread immerhin schon 45x. Ich glaube, dass das der semantisch richtige Weg ist. Dann bräuchte Linuchs auch keine absoluten Positionierungen und Magic Numbers wie left: 736.233px; auf die der alte Fuxx auf noch stolz ist.

Wie diese Datalist dann aussehen kann, hat ihm @Auge bereits mitgeteilt:

Wenn du den Stadtnamen (zumal ohne Unterscheidung der Postleitzahlen) im Value hast, ist das kein Wunder. Ich hatte dir nicht umsonst vorgeschlagen, unterschiedliche Text- und Value-Attribut-Werte zu benutzen. Jetzt mal unabhängig von dem Problem nur eines Vorschlags, zu dem mir auf Anhieb nichts einfällt, wäre das hier eine meiner Meinung nach passende Struktur.

<datalist id="such_ort_vorschlaege">
 <option value="73">Čelákovice</option>
 <option value="9421">Ascoli Piceno</option>
 <option value="389">Barcelona</option>
 <option value="1278">29221 Celle</option>
 <option value="1279">29223 Celle</option>
 <option value="1277">29225 Celle</option>
 <option value="1280">29227 Celle</option>
 <option value="1276">29229 Celle</option>
 <option value="44">Delfzijl</option>
 <option value="837">Gloucester</option>
</datalist>

Linuchs möchte imho das Suchfeld als eierlegende Wollmilchsau^[1] - er möchte

• ca. 100/1000 geplante Veranstaltungen zeigen ^[2]
• nach allen 15.000 Postleitzahlen suchen
• und eine Umkreissuche anbieten

1. Ich weiß gar nicht, ob das sinnvoll ist nach "83471 Berchtesgaden" suchen zu können und dann zu erfahren, dass es dort keine Seemannschöre gibt. Deshalb würden bei mir in der datalist nur Orte, in denen Veranstaltungen geplant sind, angezeigt werden. ^[3]

2. Ich würde das trennen
   • und den Text-Inhalt von option eben aus den Werten mit JS zusammensetzen, aber vor der Suchanfrage.
   • Wenn ein Suchvorschlag ausgewählt wurde, kann man den value auslesen und dann die betreffenden Datensätze abrufen und anzeigen.
   • Die Umkreissuche wird bei (fast) allen Firmen in einem eigenen Eingabefeld nur mit PLZ durchgeführt - dann muss man die doppelt vorhandenen Namen auch nicht ausschließen.

Ich werde bei Gelegenheit das Beispiel im Wiki durch ein komplexeres ergänzen.

---

Ein Hinweis auf Googles Vorgehensweise hilft hier imho nur wenig - die hatten 2020 135.000 Mitarbeiter, das kann als Einzelkämpfer niemand nachbauen.

Herzliche Grüße

Matthias Scharwies

---

1. Zitat: „Ich übernehme per JS vier Werte in vier Felder [land_kz, plz, ortname, ort_id]“ Datalist vermutlich nicht tauglich ↩︎

2. Habe grad das google-Suchergebnis gefunden: 58 Veranstaltungen in 9 Ländern ↩︎

3. Den ttf-font würde ich aus der CSS löschen, auch hier https://remso.eu/_text/presse.php erscheinen php-Fehlermeldungen - das sollte unterdrückt oder in einen nicht öffentlichen Bugreport geschickt werden. ↩︎