Problem with jquery autocomplete

Problem with jquery autocomplete


In my below code , i am trying to autocomplete country drop down with country name and also i want to populate hidden variable with id . It works good when i use use hard coded data as mentioned below. I want to populate data variable using java.But when i am trying to call a servlet , it does not work.Can you please guide me how should i write call back function which can populate data variable with json data similar to one mentioned as example

$.widget( "custom.catcomplete", $.ui.autocomplete, {

 _renderMenu: function( ul, items ) {
 var self = this;
 $.each( items, function( index, item ) {
 self._renderItem( ul, item );

});
}
}); $(function() {

var data =  [
     { id: "1"  ,label:     "AFGHANISTAN"       },
     { id: "2"  ,label:     "ALAND ISLANDS"                    },
     { id: "3"  ,label:     "ALBANIA"                          },
     { id: "4"  ,label:     "ALGERIA"                          },
     { id: "249"    ,label: "ZIMBABWE"                             }

];

$( "#countryName" ).catcomplete({

          delay: 0,
          source:data,
          select: function(event, ui) {
          $('#countryId').val(ui.item.id);

}
});
});