Consulta por CEP (Republica Virtual)

by gsguma

HTML

<form>
    <label for="cmbEstado">Estado</label><br />
    <select name="cmbEstado" id="cmbEstado" class="fieldLarger">
        <option value="AL">Alagoas</option>
        <option value="SP">S&atilde;o Paulo</option>
    </select>
    <br />   
    
    <label for="edtMun">Munic&iacute;pio</label><br />                                         
    <input type="text" name="edtMun" id="edtMun" class="fieldLarger" /><br />   
</form>

CSS

body {margin:10px;font-family:arial;font-size:75%}
.fieldLarger     { width:195px;   }

/* CSS form - Based on the style of google, as amended */ 
label { 
    color:#000;
    /*font-weight:bold;*/
    line-height:2em;
}     
label.error { 
    font-weight:normal;
}
textarea.error,
select.error,
input[type=email].error,
input[type=password].error,
input[type=text].error,
input[type=url].error,
textarea.error:focus,
select.error:focus,
input[type=radio].error:focus,
input[type=checkbox].error:focus,
input[type=email].error:focus,
input[type=password].error:focus,
input[type=text].error:focus,
input[type=url].error:focus { 
    outline: none; 
    border: 1px solid #dd4b39; 
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); 
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); 
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);     
}

button::-moz-focus-inner,
textarea::-moz-focus-inner,
select::-moz-focus-inner,
input::-moz-focus-inner { 
    border: 0; 
}

input, select, textarea { 
    font-family:Arial;
    margin:0;
    vertical-align:middle;
}

textarea, select {
    margin: 0 5px 0 0;
    padding:5px;
    padding-left: 8px;     
    background: #fff; 
    border: 1px solid #d9d9d9; 
    border-top: 1px solid #c0c0c0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    
    /* Only CSS3 */    
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;        
}

select { 
    height:29px;
    padding-left: 5px;         
}

input[type=email],
input[type=password],
input[type=text],
input[type=url] { 
    display:inline-block; 
    height:30px; 
    margin:0 5px 0 0;
    padding:5px;        
    padding-left:8px; 
    background:#fff; 
    border:1px solid #d9d9d9; 
    border-top:1px solid #c0c0c0; 
    
    /* Only CSS3 */
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box;

    -webkit-border-radius:3px;
    -moz-border-radius:3px;
 ...

JavaScript

$(function() {
    $('#cmbEstado').bind('change', function() {
        $('#cmbMun').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;
}