Consulta por CEP (Republica Virtual)

by gsguma

HTML

<form>
<label for="edtZipCode">CEP</label><br />                             
<input type="text" name="edtZipCode" id="edtZipCode" class="fieldLarger" placeholder="Digite o CEP e Enter" /><br />   

<label for="edtRegion">Estado</label><br />                                          
<input type="text" name="edtRegion" id="edtRegion" class="fieldLarger" /><br />   

<label for="edtCity">Cidade</label><br />                                         
<input type="text" name="edtCity" id="edtCity" class="fieldLarger" /><br />   

<label for="optPlaceType">Tipo de Logradouro</label><br />                            
<select name="optPlaceType" id="optPlaceType" class="fieldLarger">
    <option value="" selected="selected"></option>
    <option value="Rua" label="Rua">Rua</option>
    <option value="Aeroporto" label="Aeroporto">Aeroporto</option>
    <option value="Avenida" label="Avenida">Avenida</option>
    <option value="Alameda" label="Alameda">Alameda</option>
    <option value="Área" label="Área">Área</option>
    <option value="Campo" label="Campo">Campo</option>
    <option value="Chácara" label="Chácara">Chácara</option>
    <option value="Colônia" label="Colônia">Colônia</option>
    <option value="Condomínio" label="Condomínio">Condomínio</option>
    <option value="Distrito" label="Distrito">Distrito</option>
    <option value="Esplanada" label="Esplanada">Esplanada</option>
    <option value="Estação" label="Estação">Estação</option>
    <option value="Estância" label="Estância">Estância</option>
    <option value="Estrada" label="Estrada">Estrada</option>
    <option value="Favela" label="Favela">Favela</option>
    <option value="Fazenda" label="Fazenda">Fazenda</option>
    <option value="Feira" label="Feira">Feira</option>
    <option value="Gleba" label="Gleba">Gleba</option>
    <option value="Granja" label="Granja">Granja</option>
    <option value="Jardim" label="Jardim">Jardim</option>
    <option value="Ladeira" label="Ladeira">Ladeira</option>
...

CSS

body {margin:10px;font-family:arial;font-size:75%}
.fieldMini       { width:055px;   }
.fieldMedium     { width:105px;   }
.fieldLarger     { width:195px;   }
.fieldBig        { width:415px;   }
.fieldDefault    { width:305px;   }
.fieldDate       { width:130px;   }
.fieldExtra1     { width:215px;   }
.textareaDefault { height:80px;   }

form input.fieldLoading {
    background:...

JavaScript

$(function() {
    $('#edtZipCode').bind('keypress blur', function() {
        if (event.type == 'keypress' && event.which == 13) {
            event.preventDefault();
            $(this).getAddressBR();
        }
        else if (event.type == 'blur') {
            $(this).getAddressBR();
        }
    });
});

/**
 * Busca CEP (Brasil)
 */
$.fn.getAddressBR = function() {
    var elm = $(this);
    var url = 'http://cep.republicavirtual.com.br/web_cep.php';
    var cep = $.trim($(this).val());

    $.ajax({
        crossDomain: true,
        cache: false,
        dataType: 'json',
        type: 'get',
        url: url,
        data: {
            'cep': cep,
            'formato': 'json'
        },
        beforeSend: function() {
            elm.addClass('fieldLoading');
        },
        complete: function() {
            elm.removeClass('fieldLoading');
        },
        error: function(xhr, ajaxOptions, thrownError) {
            console.log('\nFunction/Method: getAddressBR\nError: ' + xhr.status + '\n' + thrownError);
        },
        success: function(data) {
            if (data.resultado == 1) {
                $('#optPlaceType    ').val(unescape(data.tipo_logradouro));
                $('#edtPlace        ').val(unescape(data.logradouro));
                $('#edtNeighborhoodt').val(unescape(data.bairro));
                $('#edtCity         ').val(unescape(data.cidade));
                $('#edtRegion       ').val(unescape(data.uf));
            }
            else {
                $('#optPlaceType    ').val('');
                $('#edtPlace        ').val('');
                $('#edtNeighborhoodt').val('');
                $('#edtCity         ').val('');
                $('#edtRegion       ').val('');
            }
        }
    });

    return this;
}