JQUERYオートコンプリートで値の代わりにIDを取得

Question

私はオートコンプリートを使用したいmysqlデータベースを持っています。 これまではクエリの結果を受け取ることができました。 これは結果です：[{"LNAME":"Napoleon","id":"1"}] しかし、私はこの場合の顧客のidを自分のフォームの別の入力フィールドに入力します。 （ナポレオンの場合は、フォームのclienteIDフィールドに "1"を記入してください） 現時点ではフィールドは更新されません。ここで

は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> 

そして、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

はこれを試してみてください：

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

サンプルデータで試してみてください。代わりにLNAMEとidのキーとしてlabelとvalueを使用しています。それ以外の場合はdefault it will set the valueでを使用してlabel in #tagフィールドを設定します。

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>