Seu Curso

  • Full Screen
  • Wide Screen
  • Narrow Screen
  • Increase font size
  • Default font size
  • Decrease font size

Preenchendo campos de endereço usando somente o CEP (autocomplete)

Imprimir
Avaliação do Usuário: / 33
PiorMelhor 

Campos para preencher informações de endereço é bem comum nos sites, principalmente em páginas de cadastro de usuário. Para facilitar o cadastro do usuário e diminuir a taxa de rejeição, é possível fazer com que ao informar o CEP, o restante das informações do endereço (logradouro, bairro, cidade, estado) sejam preenchidas automaticamente.

Abaixo segue um exemplo completo e comentado de como implementar esta funcionalidade utilizando a biblioteca jQuery e um webservice grátis ("viacep.com.br") para a consulta do endereço através do CEP.

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Buscando informações de um endereço através do CEP</title>
 </head>
 <body>
 CEP: <input type="text" id="cep" maxlength="9" placeholder="Ex: 13483-087"/><br/>
 Endereço: <input type="text" id="endereco"/><br/>
 Bairro: <input type="text" id="bairro"/><br/>
 Cidade: <input type="text" id="cidade"/><br/>
 UF: <input type="text" id="uf"/>
 
 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script>
 // Registra o evento blur do campo "cep", ou seja, quando o usuário sair do campo "cep" faremos a consulta dos dados
 $("#cep").blur(function(){
 // Para fazer a consulta, removemos tudo o que não é número do valor informado pelo usuário
 var cep = this.value.replace(/[^0-9]/, "");
 
 // Validação do CEP; caso o CEP não possua 8 números, então cancela a consulta
 if(cep.length!=8){
 return false;
 }
 
 // Utilizamos o webservice "viacep.com.br" para buscar as informações do CEP fornecido pelo usuário.
 // A url consiste no endereço do webservice ("http://viacep.com.br/ws/"), mais o cep que o usuário
 // informou e também o tipo de retorno que desejamos, podendo ser "xml", "piped", "querty" ou o que
 // iremos utilizar, que é "json"
 var url = "http://viacep.com.br/ws/"+cep+"/json/";
 
 // Aqui fazemos uma requisição ajax ao webservice, tratando o retorno com try/catch para que caso ocorra algum
 // erro (o cep pode não existir, por exemplo) o usuário não seja afetado, assim ele pode continuar preenchendo os campos
 $.getJSON(url, function(dadosRetorno){
 try{
 // Insere os dados em cada campo
 $("#endereco").val(dadosRetorno.logradouro);
 $("#bairro").val(dadosRetorno.bairro);
 $("#cidade").val(dadosRetorno.localidade);
 $("#uf").val(dadosRetorno.uf);
 }catch(ex){}
 });
 });
 </script>
 </body>
</html>

Comentários  

 
-1 #3 Não funcionouMatheus Azevedo 22-10-2016 09:58
Eu alterei o arquivo billing.phtml do magento que fica na pasta /default/template/persistent/checkout/onepage

Apenas inclui o script no final do arquivo e corrigi os nomes dos inputs..
ele carrega uma página vazia, some todos os campos.. alguém sabe onde pode ser o problema?
Citar
 
 
+1 #2 Muito topAllan Dennis 30-09-2016 10:39
Parabéns cara, muito fácil de usar, valeeeuuu! :lol: 8)
Citar
 
 
+2 #1 PerfeitoWillian Natal 23-04-2016 14:58
Simples e funcional. Muito obrigado!
Citar
 

Adicionar comentário


Código de segurança
Atualizar

You are here: