Buscar CEP de forma automatica html5

Estou tentando fazer com que, ao preencher o CEP, o nome da rua, uf, cidade e
bairro sejam preenchidos automaticamente.

Me falaram para colocar o arquivo buscar-cep.js na webcontent e os ids das labels fazer igual, mas mesmo assim estou sem sucesso. Alguém pode dar um help? Segue em anexo as telas do meu eclipse (tentei colar os códigos aqui e saiu tudo errado).
Esse é o código do buscar-cep

function limpa_formulário_cep() {
  //Limpa valores do formulário de cep.
  document.getElementById('rua').value=('');
  document.getElementById('bairro').value=('');
  document.getElementById('cidade').value=('');
  document.getElementById('uf').value=('');
}

function meu_callback(conteudo) {
  if (!('erro' in conteudo)) {
    //Atualiza os campos com os valores.
    document.getElementById('rua').value=(conteudo.logradouro);
    document.getElementById('bairro').value=(conteudo.bairro);
    document.getElementById('cidade').value=(conteudo.localidade);
    document.getElementById('uf').value=(conteudo.uf);
  } //end if.
  else {
    //CEP não Encontrado.
    limpa_formulário_cep();
    alert('CEP não encontrado.');
  }
}
        
function pesquisacep(valor) {

  //Nova variável 'cep' somente com dígitos.
  var cep = valor.replace(/\D/g, '');

  //Verifica se campo cep possui valor informado.
  if (cep != '') {

    //Expressão regular para validar o CEP.
    var validacep = /^[0-9]{8}$/;

    //Valida o formato do CEP.
    if(validacep.test(cep)) {

      //Preenche os campos com '...' enquanto consulta webservice.
      document.getElementById('rua').value='...';
      document.getElementById('bairro').value='...';
      document.getElementById('cidade').value='...';
      document.getElementById('uf').value='...';

      //Cria um elemento javascript.
      var script = document.createElement('script');

      //Sincroniza com o callback.
      script.src = 'https://viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback';

      //Insere script no documento e carrega o conteúdo.
      document.body.appendChild(script);

    } //end if.
    else {
      //cep é inválido.
      limpa_formulário_cep();
      alert('Formato de CEP inválido.');
    }
  } //end if.
  else {
    //cep sem valor, limpa formulário.
    limpa_formulário_cep();
  }
};

1 Resposta

Solucao aceita

Francisco_Chaves 12 de abr. de 2020 1 like

Olá, você poderia adicionar um evento de blur ao campo cep, veja o exemplo:

const cep = document.getElementById('cep');
cep.addEventListener("blur", function() {
  // código para manipular
});

Dentro do evento poderia realizar uma chamada assincronia com o fetch e quando receber a resposta do Webservice adicione os valores nos campos correspondentes, veja o exemplo:

function pesquisaCEP(cep) {
  const url = `https://viacep.com.br/ws/${cep}/json/`;
  fetch(url)
    .then((response) => response.json())
    .then((result) => {
    document.getElementById('rua').value=(result.logradouro);
    document.getElementById('bairro').value=(result.bairro);
    document.getElementById('cidade').value=(result.localidade);
    document.getElementById('uf').value=(result.uf);
  }).catch((err) => {
    alert('CEP inválido!!!');
  });
}

const cep = document.getElementById('cep');
cep.addEventListener("blur", function() {
  pesquisaCEP(cep.value)
});

1 Resposta

Topicos relacionados