从jQuery自动完成中获取不同的名称

Question

I'm using this function to get autocomplete on input value

<input type="text" id="product_name">

$( '#product_name' ).autocomplete({
  source:'autocomplete.php',
  minLength:2,
  select: function(event,ui){
    $('#product_name').val( ui.item.name );
  }
});

but the line

$('#product_name').val( ui.item.name );

doesn't work...

From php I store in json, "value" that is product name with different attribute, and in "name", ONLY the product name

Then, when I search with 2 digits, the results are like

product1 - qt:0 - price:20
product2 - qt:4 - price:7
product3 - qt:3 - price:11

and when I select I want to update my input only with name that is stored in ui.item.name

This is my autocomplete.php

$sql = "SELECT name, CONCAT (quantity,' - ',name,' - ',price) AS value
    FROM `product` ";

$res= $db->query($sql);
while ($r = $res->fetch()) {
  $a_json_row["name"] = r['name'];
  $a_json_row["value"] = $r['value'];
  array_push($a_json, $a_json_row );
}

echo json_encode($a_json);
flush();

Json returned from autocomplete.php is:

 [{
  "name": "MOCCOLO 60X165",
  "value": "[12] - MOCCOLO 60X165 : 4.00"
  }, {
   "name": "MOCCOLO 80X150",
   "value": "[19] - MOCCOLO 80X150 : 6.50"
  }, {
   "name": "MOCCOLO 80X200",
   "value": "[69] - MOCCOLO 80X200 : 8.00"
 }]

This is when I search

This is when I select

But I want

Answer 1

First, your php was at fault. Your ide/editor should have warned of such a simple mistake. You need to invest on better tools..

$sql = "SELECT name, CONCAT (quantity,' - ',name,' - ',price) AS value
FROM `product` ";

$a_json = [];
$res    = $db->query($sql);
while ($r = $res->fetch()) {
  $a_json[] = [
      "name"  => $r['name'],
      "value" => $r['value']
  ];
}

header('Content-type: application/json');
echo json_encode($a_json);
flush();

Then, your JS should be like this:

$('#product_name').autocomplete({
  source: "autocomplete.php",
  minLength: 2,
  select: function(event, ui) {
    $('#product_name').val(ui.item['name']);
    return false;
  }
});

Working example .