Fields to be filled in automatically

Question

I have a form where the user as he fills the fields, the information appears in a div to the side. See:

This same form has an automatic ZIP code search, that is, when you type the zip code, it automatically appears the address, neighborhood, etc.

The problem is that when the fields are filled in automatically with the address, neighborhood, city and state, it does not appear in the next div. How do I make them appear without the need to type? See below the code:

ZIP CODE

<script src="<?php echo $caminhoAbsoluto; ?>/assets/js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" >
        $(document).ready(function() {
            function limpa_formulário_cep() {
                // Limpa valores do formulário de cep.
                $("#endereco").val("");
                $("#bairro").val("");
                $("#cidade").val("");
                $("#uf").val("");
                $("#ibge").val("");
            }
            //Quando o campo cep perde o foco.
            $("#cep").blur(function() {
                //Nova variável "cep" somente com dígitos.
                var cep = $(this).val().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.
                        $("#endereco").val("...");
                        $("#bairro").val("...");
                        $("#cidade").val("...");
                        $("#uf").val("...");
                        $("#ibge").val("...");
                        //Consulta o webservice viacep.com.br/
                        $.getJSON("//viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) {
                            if (!("erro" in dados)) {
                                //Atualiza os campos com os valores da consulta.
                                $("#endereco").val(dados.logradouro);
                                $("#bairro").val(dados.bairro);
                                $("#cidade").val(dados.localidade);
                                $("#uf").val(dados.uf);
                                $("#ibge").val(dados.ibge);
                            } //end if.
                            else {
                                //CEP pesquisado não foi encontrado.
                                limpa_formulário_cep();
                                alert("CEP não encontrado.");
                            }
                        });
                    } //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();
                }
            });
        });
    </script>

FORM

<form method="post">
<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label>Loja</label>
            <input type="text" name="Loja" id="loja" class="form-control">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label>CNPJ</label>
            <input type="text" name="CNPJ" id="cnpj" class="form-control" data-mask="00.000.000/0000-00" data-mask-selectonfocus="true">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label>Nome do Responsável</label>
            <input type="text" name="NomeResponsavel" id="responsavel" class="form-control">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label>Email</label>
            <input type="email" name="Email" id="email" class="form-control">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label>Telefone</label>
            <input type="text" name="Telefone" id="telefone" class="form-control" data-mask="[phone]" data-mask-selectonfocus="true">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label>Celular</label>
            <input type="text" name="Celular" id="celular" class="form-control" data-mask="(00) 00000-0000" data-mask-selectonfocus="true">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label>CEP</label>
            <input type="text" name="CEP" id="cep" class="form-control" data-mask="00000-000" data-mask-selectonfocus="true">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label>Endereço Completo</label>
            <input type="text" name="Endereco" id="endereco" class="form-control">
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label>Bairro</label>
            <input type="text" name="Bairro" id="bairro" class="form-control">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label>Cidade</label>
            <input type="text" name="Cidade" id="cidade" class="form-control">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label>Estado</label>
            <input type="text" name="Estado" id="estado" class="form-control">
        </div>
    </div>                                                
</div>
</form>

DIV WHERE THE TYPED INFORMATION APPEARS

<div class="col-md-4">
    <div class="card card-profile">
        <div class="card-avatar" style="background-color: #fff; padding: 10px">
            <i class="far fa-address-card fa-5x"></i>
        </div>
        <div class="content">
            <h6 class="category text-gray"><p id="paragrafoLoja"></p></h6>
            <h4 class="card-title"><p id="paragrafoCNPJ"></p></h4>
            <p class="card-content">
                <p id="paragraforesponsavel"></p>
                <p id="paragrafoemail"></p>
                <p id="paragrafotelefone"></p>
                <p id="paragrafocelular"></p>
                <p id="paragrafoendereco"></p>
                <p id="paragrafobairro"></p>
                <p id="paragrafocidade"></p>
                <p id="paragrafoestado"></p>
        </p>            
    </div>
</div>

JQUERY

    <script>
        var loja = document.querySelector('#loja');
        var paragrafoLoja = document.querySelector('#paragrafoLoja');
        loja.addEventListener('keyup', function () {
        paragrafoLoja.innerHTML = loja.value;
        });
        var cnpj = document.querySelector('#cnpj');
        var paragrafoCNPJ = document.querySelector('#paragrafoCNPJ');
        cnpj.addEventListener('keyup', function () {
        paragrafoCNPJ.innerHTML = cnpj.value;
        });
        var responsavel = document.querySelector('#responsavel');
        var paragrafoResponsavel = document.querySelector('#paragraforesponsavel');
        responsavel.addEventListener('keyup', function () {
        paragrafoResponsavel.innerHTML = "<div align='left' style='padding: 10px'><strong>Responsável:</strong> <br>" + responsavel.value + "</div>";
        });
        var email = document.querySelector('#email');
        var paragrafoEmail = document.querySelector('#paragrafoemail');
        email.addEventListener('keyup', function () {
        paragrafoEmail.innerHTML = "<div align='left' style='padding: 10px'><strong>Email:</strong> <br>" + email.value + "</div>";
        });
        var telefone = document.querySelector('#telefone');
        var paragrafoTelefone = document.querySelector('#paragrafotelefone');
        telefone.addEventListener('keyup', function () {
        paragrafoTelefone.innerHTML = "<div align='left' style='padding: 10px'><strong>Telefone:</strong> " + telefone.value + "</div>";
        });
        var celular = document.querySelector('#celular');
        var paragrafoCelular = document.querySelector('#paragrafocelular');
        celular.addEventListener('keyup', function () {
        paragrafoCelular.innerHTML = "<div align='left' style='padding: 10px'><strong>Celular:</strong> " + celular.value + "</div>";
        });
        var endereco = document.querySelector('#endereco');
        var paragrafoEndereco = document.querySelector('#paragrafoendereco');
        endereco.addEventListener('keyup', function () {
        paragrafoEndereco.innerHTML = "<div align='left' style='padding: 10px'><strong>Endereço:</strong> <br>" + endereco.value + "</div>";
        });
        var bairro = document.querySelector('#bairro');
        var paragrafobairro = document.querySelector('#paragrafobairro');
        bairro.addEventListener('keyup', function () {
        paragrafobairro.innerHTML = "<div align='left' style='padding: 10px'><strong>Bairro:</strong> <br>" + bairro.value + "</div>";
        });
        var cidade = document.querySelector('#cidade');
        var paragrafoCidade = document.querySelector('#paragrafocidade');
        cidade.addEventListener('keyup', function () {
        paragrafoCidade.innerHTML = "<div align='left' style='padding: 10px'><strong>Cidade:</strong> " + cidade.value + "</div>";
        });
        var estado = document.querySelector('#estado');
        var paragrafoEstado = document.querySelector('#paragrafoestado');
        estado.addEventListener('keyup', function () {
        paragrafoEstado.innerHTML = "<div align='left' style='padding: 10px'><strong>Estado:</strong> " + estado.value + "</div>";
        });
</script>

Answer 1

Instead of using Javascript methods, use the .on() jQuery on events. For example, instead of using:

var bairro = document.querySelector('#bairro');
var paragrafobairro = document.querySelector('#paragrafobairro');
bairro.addEventListener('keyup', function () {
   paragrafobairro.innerHTML = "<div align='left' style='padding: 10px'><strong>Bairro:</strong> <br>" + bairro.value + "</div>";
});

Use:

var bairro = $('#bairro');
var paragrafobairro = $('#paragrafobairro');
bairro.on('keyup', function () {
   paragrafobairro.html("<div align='left' style='padding: 10px'><strong>Bairro:</strong> <br>" + bairro.val() + "</div>");
});

You don’t even need to create variables, you can use it like this:

$('#bairro').on('keyup', function () {
   $('#paragrafobairro').html("<div align='left' style='padding: 10px'><strong>Bairro:</strong> <br>" + this.value + "</div>");
});

And after the ZIP code AJAX is processed, fire the event keyup with .trigger("keyup") in every field going to the div:

$("#endereco, #bairro, #cidade, #uf").trigger("keyup");

Thus remaining:

if (!("erro" in dados)) {
  //Atualiza os campos com os valores da consulta.
  $("#endereco").val(dados.logradouro);
  $("#bairro").val(dados.bairro);
  $("#cidade").val(dados.localidade);
  $("#uf").val(dados.uf);
  $("#ibge").val(dados.ibge);
  $("#endereco, #bairro, #cidade, #uf").trigger("keyup");
} //end if.
else {
  //CEP pesquisado não foi encontrado.
  limpa_formulário_cep();
  alert("CEP não encontrado.");
}