alternative way for autocomplete in facebook app

I have solved all the parts and can load javascript variable using 开发者_C百科google app engine. Now i got stuck in autocomplete custom data. Here is my script

var friends=[]
{% for name in user_names %}
    vals={"id":"{{ name.id }}","name":"{{ name.user }}"}
    friends.push(vals)
{% endfor %}

$(function() {
    alert(friends); 
$( "#suggest1" ).autocomplete({
    minLength: 0,
    source: friends,
    focus: function( event, ui ) {
        $( "#suggest1" ).val( ui.item.name );
        return false;
    },
    select: function( event, ui ) {
        $( "#suggest1" ).val( ui.item.name );
        $( "#suggest1-id" ).val( ui.item.id );
        return false;
    }
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.name + "</a>" )
        .appendTo( ul );
};
});

and html code:

<div class="section" id="user-section">
                    <input id='suggest1' />
                    <input type="hidden" id="suggest1-id"/>
                </div>

friends is the list of object containing friends and their ids. Now this autocomplete is not working. Can anybody help me to find out where am i doing wrong.

perhaps it's just the format of your friends array is wrong?

jQuery UI Autocomplete docs say the items should be objects with either label or value properties, or both.

Your items have id and name properties instead.