jQuery AutoComplete，自定义返回数据

我正在尝试创建一个自动完成的框，并且由于返回自定义数据而遇到问题，我似乎无法填充自动完成框。

这是数据（JSON）：

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

这是我正在使用的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 } })); } }); });  

当我使用这段代码时，没有任何反应，大约有3px的下拉列表中没有任何内容。 正确请求数据（由FireBug控制台报告），但下拉列表中没有任何内容。

Answer 1

您需要做的是提供自己的_renderItem函数。 API中的此示例向您展示了如何执行此操作。 您还可以查看插件的源代码，了解它是如何正常完成的。

 $( "#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 $( "
" ) .data( "item.autocomplete", item ) .append( "" + item.label + "
" + item.desc + "" ) .appendTo( ul ); };