JSFiddle - React, Tailwind, and code Playground

by erackson

HTML

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

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

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

<label for="optPlaceType">Tipo de Logradouro</label><br />                            
<select name="optPlaceType" id="optPlaceType">
    <option value="Rua" label="Rua" selected="selected">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>
    <option value="Lago" label="Lago">Lago</option>
    <option value="Lagoa"...

CSS

body {margin:10px;font-family:arial;font-size:75%}
/* 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;
    border-radius:3px;   ...

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://gsguma.com.br/web_service/cep/cep-json.php';
    var cep = $.trim($(this).val());
    var usr = 'temp';
    var chv = 'secreta';

    $.ajax({
        crossDomain: true,
        cache: false,
        dataType: 'json',
        type: 'post',
        url: url,
        data: {
            'cep': cep,
            'usuario': usr,
            'chave': chv
        },
        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.status == 1) {
                $('#edtPlaceType    ').val(unescape(data.logradouro_tipo));
                $('#edtPlace        ').val(unescape(data.logradouro));
                $('#edtNeighborhoodt').val(unescape(data.bairro));
                $('#edtCity         ').val(unescape(data.cidade));
                $('#edtRegion       ').val(unescape(data.estado));
            }
            else {
                $('#edtPlaceType    ').val('');
                $('#edtPlace        ').val('');
                $('#edtNeighborhoodt').val('');
                $('#edtCity         ').val('');
                $('#edtRegion       ').val('');
            }
        }
    });

    return this;
}