Para melhorar a experiência do usuário, profissionais front-end costumam buscar formas de automatizar certos preenchimentos de cadastros. Além disso, essas formas de carregamento trazem mais integridade para os dados, diminuindo ou evitando a digitação errada de campos que podem vir a ser usados em busca. Sem dúvida, um dos carregamentos dinâmicos mais usados em cadastros é a busca automática por CEP.
Para este exemplo/tutorial, iremos usar jQuery e HTML.
Carregando o Endereço Dinamicamente pelo CEP
Talvez o mais famoso repositório público para preenchimento de CEP (sem a necessidade de uma integração com os Correios), deve ser o ViaCEP.
A API do ViaCEP possui uma integração com json, que é o que usaremos aqui.
O ViaCEP nos retorno os seguintes dados, com as respectivas chaves:
- “cep”,
- “logradouro”,
- “complemento”,
- “bairro”,
- “localidade”,
- “uf”,
- “unidade”,
- “ibge”,
- “gia”
Para exemplificarmos, vamos usar um formulário HTML simples: (Usaremos a base de estados capturado a partir do GitHub de Cassio Cardoso)
<!--Importando Script Jquery-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--Formulário-->
<form>
<label for="cep">CEP</label>
<input id="cep" type="text" required/>
<label for="logradouro">Logradouro</label>
<input id="logradouro" type="text" required/>
<label for="numero">Número</label>
<input id="numero" type="text" />
<label for="complemento">Complemento</label>
<input id="complemento" type="text"/>
<label for="bairro">Bairro</label>
<input id="bairro" type="text" required/>
<label for="uf">Estado</label>
<select id="uf">
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AP">Amapá</option>
<option value="AM">Amazonas</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MT">Mato Grosso</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RO">Rondônia</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SP">São Paulo</option>
<option value="SE">Sergipe</option>
<option value="TO">Tocantins</option>
</select>
</form>
Agora vamos executar uma função para que no momento após sair do campo CEP, ele faça a busca e preencha os demais campos. Como é no momento após deixar o campo, iremos vincular ao evento focusout.
<script type="text/javascript">
$("#cep").focusout(function(){
//Aqui vai o código
});
</script>
Agora temos que chamar a API json dentro da nossa função. Para isso, vamos utilizar o comando $.ajax, do jQuery.
Obs. Acompanhe os comentários no código para entender cada linha.
<script type="text/javascript">
$("#cep").focusout(function(){
//Início do Comando AJAX
$.ajax({
//O campo URL diz o caminho de onde virá os dados
//É importante concatenar o valor digitado no CEP
url: 'https://viacep.com.br/ws/'+$(this).val()+'/json/unicode/',
//Aqui você deve preencher o tipo de dados que será lido,
//no caso, estamos lendo JSON.
dataType: 'json',
//SUCESS é referente a função que será executada caso
//ele consiga ler a fonte de dados com sucesso.
//O parâmetro dentro da função se refere ao nome da variável
//que você vai dar para ler esse objeto.
success: function(resposta){
//Agora basta definir os valores que você deseja preencher
//automaticamente nos campos acima.
$("#logradouro").val(resposta.logradouro);
$("#complemento").val(resposta.complemento);
$("#bairro").val(resposta.bairro);
$("#cidade").val(resposta.localidade);
$("#uf").val(resposta.uf);
//Vamos incluir para que o Número seja focado automaticamente
//melhorando a experiência do usuário
$("#numero").focus();
}
});
});
</script>
Simples, não é?
Essa mesma lógica você pode usar para poder dinamicamente diversos outros tipos de dados, inclusive alguns vindo do banco. Se quiser saber mais como usar o Json com PHP e jQuery, assista nosso vídeo tutorial sobre o assunto.
Vamos testar e ver como fica:
Abaixo, você pode ver o código completo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Teste</title>
</head>
<body>
<!--Importando Script Jquery-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--Formulário-->
<form>
<label for="cep">CEP</label>
<input id="cep" type="text" required/>
<label for="logradouro">Logradouro</label>
<input id="logradouro" type="text" required/>
<label for="numero">Número</label>
<input id="numero" type="text" />
<label for="complemento">Complemento</label>
<input id="complemento" type="text"/>
<label for="bairro">Bairro</label>
<input id="bairro" type="text" required/>
<label for="uf">Estado</label>
<select id="uf">
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AP">Amapá</option>
<option value="AM">Amazonas</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MT">Mato Grosso</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RO">Rondônia</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SP">São Paulo</option>
<option value="SE">Sergipe</option>
<option value="TO">Tocantins</option>
</select>
</form>
<script type="text/javascript">
$("#cep").focusout(function(){
//Início do Comando AJAX
$.ajax({
//O campo URL diz o caminho de onde virá os dados
//É importante concatenar o valor digitado no CEP
url: 'https://viacep.com.br/ws/'+$(this).val()+'/json/unicode/',
//Aqui você deve preencher o tipo de dados que será lido,
//no caso, estamos lendo JSON.
dataType: 'json',
//SUCESS é referente a função que será executada caso
//ele consiga ler a fonte de dados com sucesso.
//O parâmetro dentro da função se refere ao nome da variável
//que você vai dar para ler esse objeto.
success: function(resposta){
//Agora basta definir os valores que você deseja preencher
//automaticamente nos campos acima.
$("#logradouro").val(resposta.logradouro);
$("#complemento").val(resposta.complemento);
$("#bairro").val(resposta.bairro);
$("#cidade").val(resposta.localidade);
$("#uf").val(resposta.uf);
//Vamos incluir para que o Número seja focado automaticamente
//melhorando a experiência do usuário
$("#numero").focus();
}
});
});
</script>
</body>
</html>
