JQUERY autocomplete obtenir l'ID au lieu de la valeur

Question

J'ai une base de données mysql où j'aimerais utiliser la saisie semi-automatique. Jusqu'à présent, je suis en mesure de recevoir les résultats de la requête. Par exemple ceci est le résultat: [{"LNAME":"Napoleon","id":"1"}] Mais je veux le id du client dans ce cas à remplir dans un autre champ de saisie de mon formulaire. (donc dans le cas de Napoleons je veux que le "1" soit rempli dans mon champ clienteID du formulaire) Au moment où le champ n'est pas mis à jour.

est ici la partie HTML:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.autocomplete.js"></script> 

<script> 
$(document).ready(function(){ 
$("#tag").autocomplete("autocomplete.php", { 
     minLength: 3, 
     select: function(event, ui) { 
      $('#clienteId').val(ui.item.id);    
       }, 
    }); 
}); 
</script> 

<form name='form_update_details' id='form_update_details' method='post' action=''> 
<input type='text' name='clienteName' id='tag'> 
<input type='text' name='clienteId' id='clienteId'> 
</form> 

Ensuite, la partie php:

<?php 

include("include/db.php"); 

    $q=$_GET['q']; 
    $my_data=mysql_real_escape_string($q); 

    $sql="SELECT ID, CONTACTS_LNAME, CONTACTS_FNAME FROM CRM_CONTACTS WHERE CONTACTS_LNAME LIKE '%$my_data%' or CONTACTS_FNAME LIKE '%$my_data%' ORDER BY CONTACTS_LNAME"; 
    $result = mysqli_query($coni,$sql) or die(mysqli_error()); 

    if($result) 
    { 
     while($row=mysqli_fetch_array($result)) 
     { 
      $data[] = array(
       'LNAME' => $row['CONTACTS_LNAME'], 
       'id' => $row['ID'] 
     ); 
     } 
     echo json_encode($data); 
     flush(); 
    } 
?> 

Answer 1

Essayez ceci:

$(function() { 
    var projects = [ 
     { 
      value: "1", 
      label: "jQuery" 
     }, 
     { 
      value: "2", 
      label: "jQuery UI" 
     }, 
     { 
      value: "3", 
      label: "Sizzle JS" 
     } 
    ]; 

    $("#project").autocomplete({ 
     minLength: 0, 
     source: projects, 
     focus: function(event, ui) { 
      $("#project").val(ui.item.label); 
      return false; 
     }, 
     select: function(event, ui) { 
      $("#project").val(ui.item.label); 
      $("#project-id").val(ui.item.value); 

      return false; 
     } 
    }) 
    .autocomplete("instance")._renderItem = function(ul, item) { 
     return $("<li>") 
     .append("<div>" + item.label + "</div>") 
     .appendTo(ul); 
    }; 
    }); 

Html:

<div id="project-label">Select a project (type "j" for a start):</div> 
<input id="project"> 
<input type="text" id="project-id"> 

Demo Fiddle

Answer 2

Essayez avec des données de l'échantillon: utiliser label et value comme clés au lieu de LNAME et id. Utilisez event.preventDefault(); pour définir le champ label in #tag sinon par default it will set the value.

var data = [ 
 
     { 
 
      value: "1", 
 
      label: "jQuery" 
 
     }, 
 
     { 
 
      value: "2", 
 
      label: "jQuery UI" 
 
     }, 
 
     { 
 
      value: "3", 
 
      label: "Sizzle JS" 
 
     } 
 
    ]; 
 

 
$(document).ready(function(){ 
 
$("#tag").autocomplete({ 
 
     source: data, 
 
     minLength: 3, 
 
     select: function(event, ui) { 
 
      event.preventDefault(); 
 
      $("#tag").val(ui.item.label); 
 
      $('#clienteId').val(ui.item.value);    
 
      } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<form name='form_update_details' id='form_update_details' method='post' action=''> 
 
<input type='text' name='clienteName' id='tag'> 
 
<input type='text' name='clienteId' id='clienteId'> 
 
</form>