autocomplete bring information to 2 different fields

Question

The problem I am going through is due to the fact that I need to return 2 different values for different fields, from an autocomplete that is working in the field "product".

It searches via sql and returns the product name already, now I want the value of the quantity column in the database also fill the stock field in the table.

I’m lost in it, if anyone can help me thank you !!

HTML

`<input type="text" name="produto" class="produto' + contador + '" />`
`<input type="text" name="estoque' + contador + '" />`

JS

$(".produto").autocomplete({
source: "../../../sistema/PDV/assets/php/busca_produtos.php",
minLength: 2,

      select: function(event, ui){

      //event.preventDefault();

      var1 = ui.item.produto_id +' - '+ ui.item.produto_nome ;

      $('input[name="produto' + contador + '"]').val( var1 ),
      $('input[name="estoque' + contador + '"]').val (ui.item.produto_qtd )

      }

});

PHP

if (isset($_GET['term'])){

$return_arr = array();

try {
    $conn = new PDO("mysql:host=".DB_SERVER.";dbname=".DB_NAME, DB_USER, DB_PASSWORD);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $stmt = $conn->prepare("SELECT id,nome,quantidade FROM produtos WHERE nome LIKE :term ");
    $stmt->execute(array('term' => '%'.$_GET['term'].'%'));

    while($row = $stmt->fetch()) {

        // $return_arr[] =  $row['id'].' - '.$row['nome'].' - '.$row['quantidade'] ;

       $return_arr[] =  array(

           'value' => $row['nome'], //Valor para referência na interface


           'produto_id'    => $row['id'],
           'produto_nome'  => $row['nome'],
           'produto_qtd'   => $row['quantidade']
       );

} catch(PDOException $e) {
    echo 'ERROR: ' . $e->getMessage();
}


echo json_encode($return_arr); 

}

After corrections in the code with the help of @Wilson I was able to display the information but there is a counter on the dynamic grid where I refer each line and item by it. And when add 2 or more lines the result always appears in the last created item, if it is possible to adjust this failure would be of great help ... Thanks in advance !

Answer 1

Thiago, first we need to change your PHP result to return a JSON object from an array, like this:

PHP

while(...){
    $return_arr[] =  array(
        'value' => $row['nome'], //Valor para referência na interface
        'produto_id' => $row['id'],
        'produto_nome' => $row['nome'],
        'produto_qtd' => $row['quantidade'],
    );
}

echo json_encode($return_arr);

After that, we have to define a callback for the event select, which is the event triggered when the user selects an item from the list. Note that we can access the value sent by php’s JSON by the object ui.item. This way, we can change the value of the parameter value of input, is thus:

JS

$(".produto").autocomplete({
    source: "../../../sistema/PDV/assets/php/busca_produtos.php",
    minLength: 2,
    select: function(event, ui){
        event.preventDefault();
        $('input[name="produto"]').val(ui.item.produto_id),
        $('input[name="estoque"]').val(ui.item.produto_qtd)
    }
});

Reference: https://api.jqueryui.com/autocomplete/#Event-select