Vorschläge bei Eingabe ins Suchfeld

[Samuel fiedler]

Hallo Linuchs!

Ich schreibe jetzt noch mal etwas zu datalist:

Vorteile

• Es werden keine Technologien verwendet, die der Benutzer möglicherweise ausgestellt haben könnte
• Funktioniert ohne HTTP-Requests
• Semantisch, weil in HTML5 integriert
• Das DOM muss nicht die ganze Zeit von JavaScript o.Ä ^[1] geändert werden

Nachteile

• Nicht benutzerdefiniert stylbar
• Bei 15000 Städten kann eine datalist groß werden, siehe den folgenden Beitrag von mir.

Gebrauch

Man definiert eine datalist mit <datalist id="ID">.
Wenn man sie nutzen möchte, kann man <input type="text" list="ID"/> nutzen.
Bisher sieht unser Beispiel so aus:

<input type="text" list="TEST"/>
<datalist id="TEST">
</datalist>

Dann können wir Optionen hinzufügen. Das tun wir mit <option>TEXT</option>.
Dabei ist TEXT der Text, der vorgeschlagen werden soll.
Erhält das option-Element kein value-Attribut, wird einfach der Text ins Inputfeld geschrieben, der als Text in der Option stand.
Wenn das option-Element jedoch ein value-Attribut enthält, wird der Text ins Inputfeld geschrieben, der im Value-Attribut steht.

Warum machst du eigentlich “nur“ Autovervollständigung, wenn du eigentlich eine Auswahlliste haben möchtest?

Nun ja, es ist deine Entscheidung, ob du datalist, Auswahllisten oder Ajax verwenden möchtest.

Au revoir,
Samuel Fiedler

---

1. Falls es JavaScript-ähnliche Technologien im Bereich den Clients gibt. ↩︎