JSFiddle - React, Tailwind, and code Playground

by Junior Thiesen

HTML

<label>Marca:</label>
<input class="w-input" type="text" id="marcas" placeholder="Selecione a Marca">
<input type="hidden" id="idmarcas">
<label>Veículo:</label>
<input class="w-input" type="text" id="veiculos" placeholder="Selecione o Modelo do Veiculo">
<input type="hidden" id="idveiculos">
<label>Ano:</label>
<input class="w-input" type="text" id="modelo" placeholder="Selecione o Ano">
<input type="hidden" id="idmodelo">
<label>Valor da FIPE:</label>
<input class="w-input" type="text" id="vfipe" placeholder="Valor da FIPE">
<label>Codigo da FIPE:</label>
<input class="w-input" type="text" id="idfipe" placeholder="Codigo da FIPE">
<label>Mês de Referência:</label>
<input class="w-input" type="text" id="reffipe" placeholder="Mês de referência">

CSS

body {
    font-family: Lato, sans-serif;
    color: #333;
    font-size: 14px;
    line-height: 20px;
}
.input {
    height: 38px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
}
.w-input {
    display: block;
    width: 50%;
    height: 30px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
}

JavaScript

$(document).ready(function(){$("#marcas").autocomplete({source:function(request,response){$.ajax({type:'GET',url:'http://fipeapi.appspot.com/api/1/carros/marcas.json',dataType:'jsonp',crossDomain:true,success:function(data){response($.ui.autocomplete.filter($.map(data,function(item){return{label:item.fipe_name,id:item.id}}),request.term))},})},minLength:2,select:function(event,ui){$("#marcas").val(ui.item.label);$("#idmarcas").val(ui.item.id);event.preventDefault()}});$('#veiculos').focusin(function(){var idmarcas=$("#idmarcas").val();$("#veiculos").autocomplete({source:function(request,response){$.ajax({type:'GET',url:'http://fipeapi.appspot.com/api/1/carros/veiculos/'+idmarcas+'.json',dataType:'jsonp',crossDomain:true,success:function(data){response($.ui.autocomplete.filter($.map(data,function(item){return{label:item.fipe_name,id:item.id}}),request.term))},})},minLength:0,select:function(event,ui){$("#veiculos").val(ui.item.label);$("#idveiculos").val(ui.item.id);event.preventDefault()}});$('#modelo').focusin(function(){var idmodelo=$("#idveiculos").val();$("#modelo").autocomplete({source:function(request,response){$.ajax({type:'GET',url:'http://fipeapi.appspot.com/api/1/carros/veiculo/'+idmarcas+'/'+idmodelo+'.json',dataType:'jsonp',crossDomain:true,success:function(data){response($.ui.autocomplete.filter($.map(data,function(item){return{label:item.name,id:item.fipe_codigo}}),request.term))},})},minLength:0,select:function(event,ui){$("#modelo").val(ui.item.label);$("#idmodelo").val(ui.item.id);event.preventDefault()}})})});$('#modelo').focusout(recuperaDadosFipe);function recuperaDadosFipe(){var idmarcas=$("#idmarcas").val();var idmodelo=$("#idveiculos").val();var idano=$("#idmodelo").val();var url='http://crossorigin.me/http://fipeapi.appspot.com/api/1/carros/veiculo/'+idmarcas+'/'+idmodelo+'/'+idano+'.json';var req=$.getJSON(url);req.done(completaFormFipe);req.fail(erro)}function erro(dadofipe){console.log(dadofipe)}function...