HTML5 Autocomplete

  • HTML
  • Snippets

Er is een element in HTML5 genaamd Datalist die autocomplete tekstvelden maakt zonder gebruik te maken van Javascript.

Om hier gebruik van te maken maak je een eerst een datalist aan en geef die een attribuut ‘id’ (deze is ook met AJAX te vullen).

<datalist id="kleuren">
	<option value="Rood">
	<option value="Blauw">
	<option value="Geel">
	<option value="Groen">
	<option value="Paars">
	<option value="Roze">
	<option value="Ultraviolet">
	<option value="Zwart">
	<option value="Wit">
</datalist>

Wijs de bovenstaande lijst toe aan een tekstveld d.m.v. het ‘list’ attribuut.

<label for="kleur">Kleur</label>
<input id="kleur" name="kleur" list="kleuren" />

Op ouder browsers zal dit mogelijk niet werken omdat die geen HTML5 ondersteunen. Voor ondersteuning van oudere browsers kun je dan het beste Autocomplete van jQuery UI gebruiken.

Demonstratie Dit is dezelfde code als hierboven



Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *