Autocomplete dynamic form

Question

Autocomplete dynamic form

Navigation

#1 by (0 votes)

1

I have a form that dynamically includes rows. In this form I have an autocomplete field where I select the product and add the value of the product in another input. My problem is this ... if I include two rows and select the product the value doubles in the price field (according to the image below) I would like each included row to take the value of that product. Follow the autocomplete code and include lines:

function autoCompletar() {
    $('.produtoDesc').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '../models/retornaProduto.php',
                dataType: "json",
                data: {
                    name_startsWith: request.term,
                    type: 'produto'
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        var code = item.split("|");
                        return {
                            label: code[0],
                            value: code[0],
                            data: item
                        }
                    }));
                }
            });
        },
        minLength: 0,
        select: function (event, ui) {
            var names = ui.item.data.split("|");
            $("input[name='produtoValor[]']").val(names[1]);
        }
    });
};

function adicionaLinha() {
    var addLinha = $("#qtdLinhas")["val"]();
    let novoCampo;
    let idLinha;
    for (var i = 0; i < addLinha; i++) {
        novoCampo = $("tr.linhas:first")["clone"]();
        idLinha = parseInt($("tr.linhas:last").prop("id").split("item_")[1]) + 1;
        novoCampo.find('input').val("");
        novoCampo.insertAfter("tr.linhas:last").attr("id", "item_" + idLinha).find("span").html(idLinha);
        removeLinha();
        autoCompletar();
    }
    ;
};

jquery autocompletar

asked by anonymous 24.05.2018 / 15:30

1 answer

add rows to datagridview Direction in route by coordinates

score 0 · Accepted Answer

You need to get the input of the same line where you entered the autocomplete field information.

In the way you are doing, it is catching all existing elements with input[name='produtoValor[] and entering the value of names[1] :

// pega todos os elementos com name produtoValor[]
$("input[name='produtoValor[]']").val(names[1]);

Change this line to:

          busca por isso                             dentro disso
                 ↓                                         ↓
$("input[name='produtoValor[]']", $(event.target).closest("tr")).val(names[1]);

This will fetch only the element of the same line <tr> where the autocomplete field is.

Example:

$( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( ".produtoDesc" ).autocomplete({
      source: availableTags,
          select: function (event, ui) {
       $("input[name='produtoValor[]']", $(event.target).closest("tr")).val("valor adicionado");
        }

    }
    );
  } );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><tableclass="ui-widget">
   <tr>
      <td>
           <label for="tags">Digite Java:</label>
           <input class="produtoDesc">
      </td>
      <td>
        <input name='produtoValor[]'>
     </td>
  </tr>
   <tr>
      <td>
           <label for="tags">Digite Basic:</label>
           <input class="produtoDesc">
      </td>
      <td>
        <input name='produtoValor[]'>
     </td>
  </tr>
</table>