jquery 자동 완성 및 레이블이 표시되지 않습니다.

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

기본 동작을 select 이벤트는 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>