JQuery autocomplete custom return data

Question

I am trying to create an autocomplete window and there are problems due to the return of user data, I can not force it to fill in the autocomplete field.

This is the data (JSON):

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

And this is the javascript that I use:

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

When I use this code, nothing happens, there is about 3px drop-down list in which there is nothing. Data is requested properly (as reported in the FireBug console), but nothing is populated in the drop-down list.

Answer 1

What you need to do is provide your own _renderItem function. This example in the API shows you how to do this. You can also look at the source code of the plugin to see how it is done in normal mode.

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