A versão 5 do HTML trouxe alguns elementos novos, e um deles é  a datalist. Uma datalist é uma lista de dados pré-definidos que são atribuídos a um elemento input.

Uma datalist comporta-se como um controlo select, mas com umas particularidades:

  • Não tem parte de texto – como o select nas opções (options)
  • Permite completação automática das opções da datalist – bastando escrever..


Seguidamente, temos um exemplo de select e options

<select name="options">
    <option value="0">0</option>
    <option value="1">1</option>
</select>

No select, para cada opção temos o texto mostrado (entre as tags <option>texto</option>) e o valor no atributo value=””.

No caso da datalist, não tem a parte de texto nas options. De seguida, está um exemplo de uma datalist:

<datalist id="listaexemplo">
    <option value="Exemplo 1">
    <option value="Exemplo 2">
    <option value="Exemplo 3">
    <option value="Exemplo 4">
    <option value="Outro exemplo">
    <option value="Mais um exemplo">
</datalist>

<input type="text" list="listaexemplo">

Como podem reparar, as opções options não têm tag de fecho como no select.

Por si só, definir uma datalist não faz nada. É necessário atribuir essa datalist a um controlo, neste caso, um input – basta atribuir o id da lista (neste caso listaexemplo) ao atribuito list no elemento input.

Podem experimentar aqui – no codepen.io

Á medida que escrevem, as várias opções que contêm essas letras são mostradas.

Neste momento, já criamos uma datalist – mas como popular automaticamente ? Bem, vamos usar jquery.

Para o nosso exemplo, usaremos uma lista de países.

Imaginemos que devolvemos um documento XML (criado por um ficheiro PHP ) para o jquery, que devolve uma lista de países

 1 <!doctype html>
 2 <head>
 3         <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
 4 <script>
 5 $(document).ready(function() {
 6         
 7         //buscar lista paises
 8         $.post ('getPaises.php','', processaXML);
 9         function processaXML (data) {
10                 $(data).find('pais').each(function() {
11                         var nome = $(this).find('nome').text();
12                         $('#listapaises').append('<option value="'+ nome + '">');
13                 });
14         }
15 });
16 </script>
17 </head>
18 <body>
19 <!-- Datalist de paises 
20         preenchida com ajax -->
21 <datalist id="listapaises"></datalist>
22 
23 <!-- Atribuir a lista a um controlo -->
24 <input type="text" list="listapaises">
25 </body>
26 </html>

Das linhas 8 à 14, usamos jquery para ir buscar – através de AJAX – a lista de países – que é devolvida em formato XML – pequeno exemplo:

<paises>
    <pais>
        <nome>Abkhazia</nome>
    </pais>
    <pais>
        <nome>Afghanistan</nome>
    </pais>
    ....
</paises>

Da linha 10 à linha 12, vamos a cada resultado devolvido (pais), procurar a tag nome – que adicionamos à datalist com o id=”listapaises”.

Desta forma, estamos a preencher dinamicamente a nossa datalist, declarada no HTML.

Podem experimentar, e à medica que forem escrevendo, vão aparecendo as opções possíveis, criando assim uma caixa de texto com autocompletação.

De seguida, o ficheiro getPaises.php, que lê um ficheiro – listapaises.txt – com um país por linha – podem conseguir isto na Internet sem qualquer problema e colocar num ficheiro de texto.

<?php
	//ler ficheiro para array
	$paises = file ('listapaises.txt');
	
	//comecar a criar o xml para devolver
	$return_value = '<?xml version="1.0" encoding="UTF-8"?>';
	$return_value .= '<paises>';

	foreach ($paises as $pais) {
		//colocar o pais
		$return_value .= '<pais>';
		$return_value .= '<nome>'.$pais.'</nome>';
		$return_value .= '</pais>';
	}

	//finalizar o xml
	$return_value .= '</paises>';

	//devolver, colocando o header correcto
	header ('Content-Type: text/xml');
	//devolver o conteudo
	echo $return_value;

?>

Após ler, devolve o resultado em XML. Podem ver o que é gerado, acedendo diretamente a ele: http://localhost/getPaises.php

Datalist é um elemento relativamente novo, podem ver aqui qual o suporte nos browsers

Espero que tenham aprendido um pouco sobre o elemento datalist e como se pode preencher automaticamente.

Mais informações

http://api.jquery.com/jquery.post/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

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