0

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;
                }
        });


        });

1 Resposta 1

1

Altere o callback onSelect para:

onSelect: function (suggestion) {   
            $('#'+ this.id).parent().parent().find('input[name="cod"]').val( suggestion.id );
            $('#'+ this.id).parent().parent().find('input[name="desc"]').val( suggestion.value );
            $('#'+ this.id).parent().parent().find('input[name="und"]').val( suggestion.data );
            return false;
        }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .