получить другое название от 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, «value», который является именем продукта с другим атрибутом, и в «name», ТОЛЬКО название продукта

Тогда, когда я ищу с 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(); 

Json вернулся из autocomplete.php является:

[{ 
    "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 был виноват. Ваш идеал/редактор должен был предупредить о такой простой ошибке. Вы должны инвестировать в лучшие инструменты ..

$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.