jquery自動完成顯示ID和不標籤

我正在使用jquery的自動完成功能，它的工作很好，除了當我從下拉列表中選擇一些東西時，輸入字段會填充值而不是標籤。jquery自動完成顯示ID和不標籤

我的代碼如下：

<?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" />

來源

2012-05-02 Lance

也許你只需要交換'value'和'label' ......？ – gdoron

是的，但然後自動完成功能將加載值而不是標籤。 – Lance

的默認行爲選擇事件的目的是用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>

來源

2013-07-18 11:03:48 kd12

這工作就像一個魅力。謝謝。 – Immortal

你可以嘗試把label第一陣列中value之前或檢討jQuery的文檔，此代碼對.autocomplete() with custom results：

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

來源

2012-05-02 01:14:06

回答

相關問題