Preencher uma datalist de HTML5 dinamicamente com jquery

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

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:

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

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:

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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *