javascript - 从 jquery 自动完成中获取不同的名称

Question

我使用此函数来自动完成输入值

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

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

但行

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

不起作用...

从 php 中，我存储在 json 中，“值”是具有不同属性的产品名称，而在“名称”中，仅存储产品名称

然后，当我用 2 位数字搜索时，结果如下

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

当我选择时，我只想使用存储在 ui.item.name

中的名称更新我的输入

这是我的 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();

从 autocomplete.php 返回的 Json 是:

 [{
  "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"
 }]

这是我搜索的时候

这是我选择的时候

但我想要

Answer 1

首先，你的 php 有问题。你的IDE/编辑器应该警告这样一个简单的错误。您需要投资更好的工具..

$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();

那么，你的 JS 应该是这样的:

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

工作中example .