Boa Noite, Preciso de um ajuda!, acredito que seja muito simples, mais já estou a 3 horas nesse codigo, e fiquei cego! kkkk
Tenho um formulário que consta com os campos abaixo.
Estou fazendo o autocomplete no campo ID="cod" e a resposta da busca ser impressa nos campos id="cod", id="desc" e id="und". até aqui o codigo roda, o problema é que ele imprime os resultados em os todos os cod, desc e und, queria acho que preciso fazer a quebra de , mas não estou conseguindo
Plugin utilizado: https://www.devbridge.com/sourcery/components/jquery-autocomplete/
Desde já grato!
<table class="table table-centered m-0" id="products-table">
<thead class="thead-light">
<tr>
<th>Codigo</th>
<th>Descrição</th>
<th>Und.</th>
<th>Quantidade</th>
<th>R$: UND</th>
<th>R$: TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control" id="cod" name="cod" autocomplete="off"></td>
<td><input type="text" class="form-control" id="desc" name="desc" autocomplete="off"></td>
<td><input type="text" class="form-control" id="und" name="und" autocomplete="off"></td>
<td><input type="text" class="form-control" name="qdt" autocomplete="off"></td>
<td><input type="text" class="form-control" name="vlund" autocomplete="off"></td>
<td><input type="text" class="form-control" name="vltotal" readonly></td>
</tr>
<tr>
<td><input type="text" class="form-control" id="cod1" name="cod" autocomplete="off"></td>
<td><input type="text" class="form-control" id="desc1" name="desc" autocomplete="off"></td>
<td><input type="text" class="form-control" id="und1" name="und" autocomplete="off"></td>
<td><input type="text" class="form-control" autocomplete="off"></td>
<td><input type="text" class="form-control" autocomplete="off"></td>
<td><input type="text" class="form-control" readonly></td>
</tr>
<tr>
<td><input type="text" class="form-control" id="cod2" name="cod" autocomplete="off"></td>
<td><input type="text" class="form-control" id="desc2" name="desc" autocomplete="off"></td>
<td><input type="text" class="form-control" id="und2" name="und" autocomplete="off"></td>
<td><input type="text" class="form-control" autocomplete="off"></td>
<td><input type="text" class="form-control" autocomplete="off"></td>
<td><input type="text" class="form-control" readonly></td>
</tr>
<tr>
<td><input type="text" class="form-control" id="cod3" name="cod" autocomplete="off"></td>
<td><input type="text" class="form-control" id="desc3" name="desc" autocomplete="off"></td>
<td><input type="text" class="form-control" id="und3" name="und" autocomplete="off"></td>
<td><input type="text" class="form-control" autocomplete="off"></td>
<td><input type="text" class="form-control" autocomplete="off"></td>
<td><input type="text" class="form-control" readonly></td>
</tr>
<tr>
<td><input type="text" class="form-control" id="cod4" name="cod" autocomplete="off"></td>
<td><input type="text" class="form-control" id="desc4" name="desc" autocomplete="off"></td>
<td><input type="text" class="form-control" id="und4" name="und" autocomplete="off"></td>
<td><input type="text" class="form-control" autocomplete="off"></td>
<td><input type="text" class="form-control" autocomplete="off"></td>
<td><input type="text" class="form-control" readonly></td>
</tr>
<tr>
<td><input type="text" class="form-control" id="cod5" name="cod" autocomplete="off"></td>
<td><input type="text" class="form-control" id="desc5" name="desc" autocomplete="off"></td>
<td><input type="text" class="form-control" id="und5" name="und" autocomplete="off"></td>
<td><input type="text" class="form-control" autocomplete="off"></td>
<td><input type="text" class="form-control" autocomplete="off"></td>
<td><input type="text" class="form-control" readonly></td>
</tr>
<tr>
<td><input type="text" class="form-control" id="cod6" name="cod" autocomplete="off"></td>
<td><input type="text" class="form-control" id="desc6" name="desc" autocomplete="off"></td>
<td><input type="text" class="form-control" id="und6" name="und" autocomplete="off"></td>
<td><input type="text" class="form-control" autocomplete="off"></td>
<td><input type="text" class="form-control" autocomplete="off"></td>
<td><input type="text" class="form-control" readonly></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><button type="button" class="btn btn-blue btn-rounded waves-effect waves-light"><i class="fas fa-plus"></i> Linhas</button></td>
<td></td>
<td></td>
<td></td>
<td><label for="datae">Outras Despesas</label><input type="text" class="form-control" autocomplete="off"></td>
<td><label for="datae">Valor Total da Nota</label><input type="text" class="form-control" readonly></td>
</tr>
</tfoot>
</table>
var el = document.getElementById('products-table');
el.addEventListener('click', function(e) {
$('input[id^="cod"]').autocomplete({
minChars: 2,
lookup: function (query, done) {
var result = {
suggestions: [
{ "value": "Arroz", "data": "KG", "id": "001" },
{ "value": "Batata", "data": "KG", "id": "002" },
{ "value": "Cenoura", "data": "KG", "id": "003" }
]
};
done(result);
},
onSelect: function (suggestion) {
$( 'input[id^="cod"]').val( suggestion.id );
$( 'input[id^="desc"]' ).val( suggestion.value );
$( 'input[id^="und"]' ).val( suggestion.data );
return false;
}
});
});