jQuery自動完成，自定義返回數據

Question

我試圖創建一個自動完成框，並且由於返回自定義數據而一直有問題，我似乎無法讓它填充自動填充框。

這是數據（JSON）：

[{"user_id":"1","user_name":"jarru"},{"user_id":"2","user_name":"harryq"},{"user_id":"3","user_name":"sleet"}] 

這是我使用的JavaScript：

<script type="application/javascript"> 
$(document).ready(function(){ 
    $("#add_email_user").autocomplete({ 
      source: baseurl+"users/ajax/users/", 
         dataType: 'json', 
         success: function(data) { 
         console.log("asd"); 
          response($.map(data, function(item) { 
          return { 
           label: item.user_name, 
           value: item.user_id 
          } 
          })); 
          } 
     }); 

}); 
</script> 

當我使用此代碼，什麼都不會發生，有大約3px的沒有任何內容的下拉菜單。正在正確請求數據（由FireBug控制檯報告），但沒有填充到下拉列表中。

Answer 1

您需要做的是提供您自己的_renderItem功能。 API中的這個example告訴你如何做到這一點。你也可以看看插件的源代碼，看看它是如何正常完成的。

$("#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); 
};