jQuery(document).ready(function($){
  var $postalcodeAutocompleteContainer = $('<div id="postalcode-autocomplete" />').appendTo(document.getElementsByTagName('body')[0]);
  $("#billing\\:postcode").autocomplete(
  {
	  appendTo: $postalcodeAutocompleteContainer,
	  source: function( request, response ) {
			$.ajax({
				url: "http://api.geonames.org/postalCodeSearchJSON",
				dataType: "jsonp",
				data: {
					featureClass: "P",
					style: "full",
					maxRows: 12,
					postalcode_startsWith: request.term,
					country: 'CH',
					username: 'vac'
				},
				success: function( data ) {
					response( $.map( data.postalCodes, function( item ) {
						return {
							label: (item.postalCode + ', ' + item.placeName),
							value: item.postalCode,
							city: item.placeName,
							postalcode: item.name
						}
					}));
				}
			});
		},
		minLength: 2,
		select: function( event, ui ) {
			$("#billing\\:city").val(ui.item.city);
		},
		open: function() {
			$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
		},
		close: function() {
			$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
		}
  });
});

