David CHCSe você está desenvolvendo algum e-commerce, ou mesmo desenvolvendo algo precisa de cadastro onde necessita do endereço, algo que facilita bastante para o usuário é o preenchimento automático a partir do CEP.
Temos já no blog uma publicação de como fazer usando jQuery, mas agora faremos uma versão usando apenas javascript.
A ideia é quando usuário digita um cep, e clicar fora do campo de cep, os outros campos de endereço sejam preenchidos automaticamente. Esse preenchimento é trava de uma requisição de uma API, que você informa o CEP, ele vai retornar os dados dos campos.
Sabendo desse fluxo, vamos definir primeiramente o HTML
No HTML terá apenas um formulário com campos de cep, rua, bairro, cidade, e estado.
<form>
<div class="frm-group">
<label>CEP</label>
<input type="text" name="cep" />
</div>
<div class="frm-group">
<label>Rua</label>
<input type="text" name="rua" />
</div>
<div class="frm-group">
<label>Bairro</label>
<input type="text" name="bairro" />
</div>
<div class="frm-group">
<label>Cidade</label>
<input type="text" name="cidade" />
</div>
<div class="frm-group">
<label>Estado</label>
<input type="text" name="estado" />
</div>
</form>
Esse formulário temos os campos input, que são englobados por uma div, com classe .frm-group, é apenas pra fazermos uma pequena estilização via CSS. Vamos agora aplicar esse estilização
.frm-group{
padding:5px;
}
.frm-group label{
display: block;
}
.frm-group:nth-child(1){
border: 1px solid #CCC;
background: #e5e5e5;
padding: 10px 5px;
}
Fizemos apenas uma seleção das div.frm-group, para definir uma espaçamento, deixar o label como display:block para ele ocupar o espaço para fazermos uma quebra de linha, e selecionamento o primeiro campo, que do CEP , para ter uma cor diferente.
Agora vamos para o javascript, vamos definir uma função que auto-executa para definirmos um escopo para as que variáveis fiquem nesse escopo, par evitar vazamento, e assim evitando possíveis bug caso você implemente em algum sistema existente.
(function(){
/*Aqui dentro ficará o script*/
})();
Agora vamos selecionar o campo de CEP e atribuir um evento blur nesse campo, que quando ao clicar fora dele, ele execute alguma ação
(function(){
const cep = document.querySelector("input[name=cep]");
cep.addEventListener('blur', e=> {
});
})();
Pronto, agora precisamos recuperar o que foi digitado, fazer uma limpeza no campo, para deixar apenas números.
(function(){
const cep = document.querySelector("input[name=cep]");
cep.addEventListener('blur', e=> {
const value = cep.value.replace(/[^0-9]+/, '');
const url = `https://viacep.com.br/ws/${value}/json/`;
});
})();
Recuperamos o valor digitado no campo cep, atraves do atributo value, e usamos a função replace para remover todos os caracteres que não sejam numero, através de uma expressão regular.
Além disso, definimos uma variação url, que contém o endpoint para fazer a requisição para retornar as informações do cep.
Agora vamos realizar a requisição usando a função fetch do javascript.
(function(){
const cep = document.querySelector("input[name=cep]");
cep.addEventListener('blur', e=> {
const value = cep.value.replace(/[^0-9]+/, '');
const url = `https://viacep.com.br/ws/${value}/json/`;
fetch(url)
.then( response => response.json())
.then( json => {
});
});
})();
A função fetch retorna um Promisse, e acessamos a Promisse com método then, definimos uma função anônima que o parâmetro será objeto Response, e assim retornando o método json do objeto Response, que também é uma Promisse, e como vimos, para acessar uma Promisse usando o método then, definimos uma função anônima recebendo um json.
Agora fizemos a requisição, agora vamos, com Json retornando, vamos preencher os campos.
(function(){
const cep = document.querySelector("input[name=cep]");
cep.addEventListener('blur', e=> {
const value = cep.value.replace(/[^0-9]+/, '');
const url = `https://viacep.com.br/ws/${value}/json/`;
fetch(url)
.then( response => response.json())
.then( json => {
if( json.logradouro ) {
document.querySelector('input[name=rua]').value = json.logradouro;
document.querySelector('input[name=bairro]').value = json.bairro;
document.querySelector('input[name=cidade]').value = json.localidade;
document.querySelector('input[name=estado]').value = json.uf;
}
});
});
})();
Na API do viacep, ele retorna algumas informações, como logradouro (rua), bairro, localidade (cidade), uf (estado), ele trás também o código do IBGE, mas não vamos utilizar. Vemos se o campo logradouro existe, se existir, selecionamos cada campo, e atribuímos os valores correspondentes.
Dessa forma, você pode implementar em seus projetos, de uma forma fácil e rápido usando apenas javascript.
Espero que tenha gostado.
Você gostou desse tutorial? Quem tal aprender JavaScript? Nós possuímos diversos cursos sobre Front-End que ajudará a dominar essa linguagem. Não perca tempo, assine agora, e venha estudar com a gente.
