Vamos a repasar esta etiqueta datalist de HTML5, es uno de las nuevos input, etiquetas y atributos del form en HTML5 para formularios. Ver también atributo list HTML5.
Este nuevo elemento agrupa varios valores predefinidos que facilitan el autocompletado de un campo tipo input. De manera que el usuario según vaya escribiendo el navegador abre una lista desplegable con las diferentes opciones a seleccionar.
Lo que anteriormente veníamos haciendo con plugins en jQuery ahora lo podemos hacer fácilmente con esta nueva etiqueta de los formularios en HTML5.
En ningún momento se fuerza al usuario a elegir el valor del datalist, simplemente le sugiere ciertos valores.
Voy a poneros la sintaxis de datalist extraída de su web oficial para que veáis de un vistazo su nomenclatura:
<input list="listacolores"> <datalist id="listacolores"> <option value="Azul"> <option value="Rojo"> <option value="Amarillo"> <option value="Negro"> <option value="Blanco"> </datalist>
En el ejemplo de sintaxis vemos como primero declaramos un input con el nombre de la lista en el atributo ‘list’. Después ponemos la nueva etiqueta datalist con los diferentes valores de la lista y la relacionamos con el input mediante id ‘listacolores’.
Es decir, el atributo ‘list‘ del input y el ‘id’ del datalist tienen que coincidir, de lo contrario no se relacionarían y no saldría la lista de valores sugeridos.
Como a día de hoy (abril 2013) todavía no está estandarizado el HTML5, os recomiendo que los ejemplos los veáis con con Google Chrome, ya que es el navegador que más actualizado está con las funcionalidades HTML5.
Vamos a sugerir una serie de colores tal y como muestra la imagen inferior cuando comenzamos a escribir ‘verde’.
<form name="formulario" id="formulario" action="/demos/2013/05-html-form-datalist.php" method="POST"> <!-- La datalist con id 'listas' y sus diferentes valores --> Escribe un color (Azul, rojo, amarrillo, negro, verde): <datalist id="listas"> <option value="azul"> <option value="rojo"> <option value="amarillo"> <option value="negro"> <option value="verde"> </datalist> <!-- Asociamos al input la datalist 'listas' --> <input name="color" list="listas"> <input type="submit" value="Enviar"> </form>
Os explico el código de la demo:
Si queremos dotar a los <option> de algo más de información podemos añadirles el atributo label.
<datalist id="listas"> <option value="azul" label="color azul"> <option value="rojo" label="color rojo"> <option value="amarillo" label="color amarillo"> <option value="negro" label="color negro"> <option value="verde" label="color verde"> </datalist>
Los tipos de input más comunes que soportan datalist en HTML5 son:
Por último recogemos por POST el valor seleccionado del <datalist> del valor del <input>
<?php //si hay post saco el valor if($_POST) { echo "El color seleccionado es: ".$_POST['color']; } ?>
A petición del comentario, pongo un ejemplo para obtener el valor con jQuery. Aquí tenéis el 2º ejemplo de datalist HTML5.
<script type="text/javascript"> $(document).ready(function() { $("input[name=color]").change(function() { alert($("input[name=color]").val()); }); }); </script>
Tal y como veis en el ejemplo, he realizado la obtención del valor con el método change() de jQuery. También podéis ver más ejemplos en el post de jQuery click().
En esta url tenéis el listado completo de los nuevos input de HTML5.
En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.