Das Ausfüllen von Formularen kann manchmal mühsam sein. Es ist wichtig, Nutzern mehrere Optionen zur Auswahl zu stellen und ihnen gleichzeitig die Möglichkeit zu geben, frei zu tippen. Das datalist-Element, das gerade in Chrome Canary (M20) eingeführt wurde, macht das ganz einfach.
Mit datalist können Sie in Ihrer App eine Liste mit Vorschlägen für Ergebnisse definieren, aus denen Nutzer auswählen können. Sie können entweder eine Option aus der Liste auswählen oder einen freien Text eingeben.
Optionen können mit einer datalist verknüpft werden, indem die id im list-Attribut eines input-Elements angegeben wird:
<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>
datalist ist in den neuesten Versionen von Firefox, Opera und Internet Explorer ab Version 10 weit verbreitet. Sie müssen sich also nicht allzu viele Gedanken über die Kompatibilität machen. Wenn Sie sichergehen möchten, dass die Funktion in allen Browsern funktioniert, gehen Sie so vor:
<datalist id="fruits">
Pick your favorite fruit
<select name="fruit_sel">
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Peach">Peach</option>
</select>
or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />
Wenn datalist in Ihrem Browser verfügbar ist, wird alles unter datalist mit Ausnahme der option-Elemente ausgeblendet. Wenn Sie diesen Fallback-Mechanismus verwenden, achten Sie darauf, dass Ihr Server sowohl „obst_sel“ als auch „obst“ als Suchparameter erfasst.