JSFiddle - React, Tailwind, and code Playground
HTML
<input class="w-input" type="text" id="marcas" placeholder="Selecione a Marca">
<input type="hidden" id="idmarcas">
<input class="w-input" type="text" id="veiculo" placeholder="Selecione o Modelo do Veiculo">
CSS
.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
$("#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: 1,
//evento de quando você seleciona uma opção
select: function (event, ui) {
//seto a descrição para aparecer para usuario no input text
$("#marcas").val(ui.item.label);
//seto o id para ir para seu backend :D
$("#idmarcas").val(ui.item.id);
alert(ui.item.id);
event.preventDefault();
}
});