jQuer UI autocomplete jsonp mapping response

I am trying to use the autocomplete from jqueryUI. When i alert the response i get the following : ([ { "id": "test", "label": "test", "value": "test" } ]);

but when i try to map the result the dropdown result is empty. here is my code:

<script>
 $(function() {
     function log( message ) {
         $( "<div/>" ).text( message ).prependTo( "#log" );
         $( "#log" ).scrollTop( 0 );
     }
 
     $( "#city" ).autocomplete({
         source: function( request, response ) {
             $.ajax({
                 url: "http://ws.geonames.org/searchJSON",
                 dataType: "jsonp",
                 data: {
                     featureClass: "P",
                     style: "full",
                     maxRows: 12,
                     name_startsWith: request.term
                 },
                                     success: function( data ) {
                     alert(data);
                     response( $.map( data, function( item ) {
                         return {
                             label: item.label,
                             value: item.value
                         }
                     }));
                 }
             });
         },
         minLength: 2,
         select: function( event, ui ) {
             log( ui.item ?
                 "Selected: " + ui.item.label :
                 "Nothing selected, input was " + this.value);
         },
         open: function() {
             $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
         },
         close: function() {
             $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
         }
     });
 });
 </script>
 

my server side script uses the following code:

echo $_GET['jsonp_callback'] . '(' . $data . ');';
 

Thanks anyway

---