如何从jquery ui自动完成中保存ID而没有数据？

Question

I have this code:

buscarcliente.php

<?php
include("../../conexion.php");

$nombre=$_GET["term"]; 
$sql_cliente="SELECT cod, nombre FROM rc_clientes WHERE nombre LIKE '%$nombre%'";
$buscar = mysqli_query($conexion,$sql_cliente);

$json=array();

while($row = mysqli_fetch_array($buscar)) {
  array_push($json, $row['nombre']);
}
echo json_encode($json);

?>

renta_form.php JQuery:

$(function() {
  $( "#cliente" ).autocomplete({
    source: 'modulos/inspeccion/buscarcliente.php'
  });
});

renta_form.php HTML:

 <tr>       
   <td><b>Cliente:</b><br><input id="cliente" name="cliente" type="text"></td>
 </tr>

This code shows me the values from each id to autocomplete an input, but it is saving the name and not the id, what can I do to show the value to help the user but save id in database?

Have a good day!

UPDATED CODE:

Now is showing me the list of the names that I am calling, but when I click the name that I want, is replace automatically by the cod of the id cliente_cod

HTML:

<tr>        
        <td><b>Cliente:</b><br><input id="cliente" name="cliente" type="text"></td>
        <input id="cliente_cod" name="cliente_cod" type="hidden">
</tr>

JavaScript:

$(function() {
    $( "#cliente" ).autocomplete({
    source: 'modulos/renta/buscarcliente.php',
        select: function(event, ui)
        {       
            $("#cliente").val(ui.item.label);           
            $("#cliente_cod").val(ui.item.value);
        }     
    });
  });

PHP

<?php
include("../../conexion.php");

$nombre = $_GET["term"]; 
        $sql_cliente="SELECT cod, nombre FROM rc_clientes WHERE nombre LIKE '%$nombre%'";
        $buscar = mysqli_query($conexion,$sql_cliente);

        $json=array();
            while($row = mysqli_fetch_array($buscar)) {
                array_push($json, array('value' => $row['cod'], 'label' => $row['nombre']));
            }

            header('Content-Type: application/json');
            echo json_encode($json);

?>

Answer 1

If your data was something like:

cod     nombre
1       Homer Simpson
2       Marge Simpson
3       Bart Simpson
4       Lisa Simpson
5       Maggie Simpson

When you run the SQL Query, such as:

SELECT cod, nombre FROM rc_clientes WHERE nombre LIKE '%b%'

You would get a result set like:

3       Bart Simpson

When we pass this back via JSON, we want a value and a label. To accomplish this, we want to do the following in the PHP. You will want to adjust your PHP as it is very vulnerable from SQL Injection as it is.

PHP Snippet

$json=array();
while($row = mysqli_fetch_array($buscar)) {
  array_push($json, array('value' => $row['cod'], 'label' => $row['nombre']));
}
header('Content-Type: application/json');
echo json_encode($json);

The resulting JSON data should be:

[
  {
    "value": 3,
    "label": "Bart Simpson"
  }
]

Now we can handle how this is we are used to in the select callback:

HTML Snippet

<table>
  <tr>
    <td><b>Empleado:</b>
      <br>
      <input id="empleado" type="text">
      <input id="empleado_cod" type="hidden">
    </td>
  </tr>
</table>

JavaScript

$(function() {
  $("#empleado").autocomplete({
    source: 'modulos/inspeccion/buscarcliente.php',
    focus: function(event, ui){
      $("#empleado").val(ui.item.label);
      return false;
    },
    select: function(event, ui){
      $("#empleado").val(ui.item.label);
      $("#empleado_cod").val(ui.item.value);
      return false;
    }
  });
});

See More:

• http://jqueryui.com/autocomplete/#custom-data
• http://jqueryui.com/autocomplete/#remote
• http://api.jqueryui.com/autocomplete/#event-select