jqueryオートコンプリートでIDが表示され、ラベルが表示されない

Question

jqueryのオートコンプリート機能を使用しています。ドロップダウンリストから何かを選択すると、入力フィールドに値が入力され、ラベルは入力されません。

次のように私のコードは次のとおりです。

<?php 
    $query =  mysql_query("SELECT users.* FROM users JOIN peers ON peers.peer = users.user_id WHERE peers.user_id = '".$_SESSION['id']."'")or die(mysql_error()); 
    $count = mysql_num_rows($query); 
    $i = 0; 

    while($row = mysql_fetch_assoc($query)) 
    { 
     $first[$i] = $row['first_name']; 
     $last[$i] = $row['last_name']; 
     $user_id[$i] = $row['user_id']; 

     $i++; 
    } 

$data = ""; 

for($i=0;$i<$count;$i++) 
{ 
    if($i != ($count-1)) 
    { 
     $data .= '{ value: '.$user_id[$i].', label: "'.$first[$i].' '.$last[$i].'" }, '; 
    } else 
    { 
     $data .= '{ value: '.$user_id[$i].', label: "'.$first[$i].' '.$last[$i].'" }'; 
    } 
} 
?> 
<script type="text/javascript"> 
$("#auto").autocomplete({ 
    source: data, 
    select: function(event, ui) 
    { 
     var id = ui.item.value; 
     var name = ui.item.label; 
    } 
    }); 
    </script> 

    <input type="text" value="Enter a connection's name" id="auto" /> 

Answer 1

デフォルトの動作の選択イベントは、ui.item.valueで入力を更新することです。このコードは、イベントハンドラの後に実行されます。

falseを返すか、これを防ぐためにevent.preventDefault（）を呼び出すだけです。これを試してみてください

<script type="text/javascript"> 
    $("#auto").autocomplete({ 
     source: data, 
     select: function(event, ui) 
     { 
      var id = ui.item.value; 
      var name = ui.item.label; 
      $("#auto").val(name); 
      return false; 
     }, 
     focus: function(event, ui){ 
      return false; 
     } 
    }); 
</script> 

Answer 2

あなたはvalue前に、アレイ内のlabel最初に入れてみてくださいまたは.autocomplete() with custom resultsにjQueryのドキュメントからこのコードを確認することができ、次のいずれか

<script> 
$(function() { 
    var projects = [ 
     { 
      value: "jquery", 
      label: "jQuery", 
      desc: "the write less, do more, JavaScript library", 
      icon: "jquery_32x32.png" 
     }, 
     { 
      value: "jquery-ui", 
      label: "jQuery UI", 
      desc: "the official user interface library for jQuery", 
      icon: "jqueryui_32x32.png" 
     }, 
     { 
      value: "sizzlejs", 
      label: "Sizzle JS", 
      desc: "a pure-JavaScript CSS selector engine", 
      icon: "sizzlejs_32x32.png" 
     } 
    ]; 

    $("#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); 
      $("#project-description").html(ui.item.desc); 
      $("#project-icon").attr("src", "images/" + ui.item.icon); 

      return false; 
     } 
    }) 
    .data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a>" + item.label + "<br>" + item.desc + "</a>") 
      .appendTo(ul); 
    }; 
}); 
</script> 



<div class="demo"> 
<div id="project-label">Select a project (type "j" for a start):</div> 
<img id="project-icon" src="/demos/autocomplete/images/transparent_1x1.png" class="ui-state-default"//> 
<input id="project"/> 
<input type="hidden" id="project-id"/> 
<p id="project-description"></p> 
</div>