Programação,Tutoriais -
Como preencher o Endereço Automaticamente a Partir do CEP?
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>