Input autocompletable sin Javascript – HTML Tips

El elemento datalist

Otro de los nuevos elementos que trae el HTML5 es el elemento datalist. La documentación acerca de este elemento nos dice lo siguiente:

The datalist element represents a set of option elements that represent predefined options for other controls. In the rendering, the datalist element represents nothing and it, along with its children, should be hidden.

Es decir, el elemento datalist representa un conjunto de opciones que nos muestran opciones predefinidas para otros controles. En la visualización el elemento y sus hijos están ocultos.

¿Como podemos utilizarlo?

A la hora de incluirlo dentro de nuestro código definimos el elemento y su conjunto de opciones, este elemento lo vincularemos por ejemplo con un campo input


<label>Airport: <input type="text" list="airports" name="to" />
<datalist id="<span class=&quot;hiddenSpellError&quot; pre=&quot;&quot;>airports</span>"></datalist>
value='ATL' label="Atlanta">
value='MEM' label="Memphis">
value='LHR' label="London Heathrow">
value='LAX' label="Los Angeles">
value='FRA' label="Frankfurt">
 </datalist>

Al pulsar la tecla L se muestra los aeropuertos que empiezan con L

Como se ve en la imagen, nos aparece el value en negrita y el valor de label un poco mas claro, y una vez seleccionado el valor, en el campo de texto se queda el valor del value.

Estos elementos pueden ser reutilizados dentro de una pagina web, por ejemplo si quisiéramos poner una lista de aeropuertos de origen y destino, nos podría valer con el mismo datalist.

Este elemento esta soportado por todos los navegadores a excepción de Safari.

Mas información:

http://www.w3.org/TR/html5/forms.html#the-datalist-element

http://www.w3schools.com/tags/tag_datalist.asp