2011-07-11 3 views
4

オートコンプリートボックスを作成しようとしていますが、カスタムデータを返すことで問題が発生していますが、オートコンプリートボックスに入力できないようです。jQueryオートコンプリート、カスタムリターンデータ

[{"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がある

この

は、データ(JSON)でありますそこに何もないドロップダウン。データは適切に要求されていますが(FireBugコンソールから報告されます)、ドロップダウンには何も入力されません。

答えて

5

あなたがする必要があるのは、独自の_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); 
}; 
関連する問題