jQuery Autocomplete/JSON w/GeoNames for city search

JavaScript
1

This is probably less a jQuery question, and more about how to request info from GeoNames. I have the following:


  $(document).ready(function() {
	$( "#city" ).autocomplete({
		source: function( request, response ) {
			$.ajax({
				url: "http://ws.geonames.org/searchJSON",
				dataType: "jsonp",
				data: {
					style: "medium",
					maxRows: 10,
					//country: ["US","FR","DE","GB","IT"],
					featureClass: "P",
					//featureCode: "PPL",
					continentCode: ["NA","SA","EU"],
					name_startsWith: request.term
					//name_startsWith: function () { return $("#city").val() }
				},
				success: function( data ) {
					response( $.map( data.geonames, function( item ) {
						return {
							label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryCode,
							value: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryCode,
							lat: item.lat,
							lng: item.lng
						}
					}));
				}
			});
		},
		//Start Search after user types...
		minLength: 2,
		close: function() {
			//UI plugin not removing loading gif, lets force it
			$( '#city' ).removeClass( "ui-autocomplete-loading" );
		}
	});
  });

Currently, when the user types what the prompt within the page suggests (City Name), the field returns a list of cities. However, if the user keeps typing to include their “state” or “country” the suggestion list is removed.

Is there a way with GeoNames to search both “city” and “state”, or “city” and “country”. I’ve dug thru their documentation and don’t see anything.

Just wondering if anyone has had experience using this service and tried to do something similar.

TY!

2

So, it seems that the following will return what I’m looking for:


  $(document).ready(function() {
	$( "#city" ).autocomplete({
		source: function( request, response ) {
			$.ajax({
				url: "http://ws.geonames.org/searchJSON",
				dataType: "jsonp",
				data: {
					style: "medium",
					maxRows: 10,
					featureClass: "P",
					continentCode: ["NA","SA","EU"],
					q: request.term,
					username: "demo"
				},
				success: function( data ) {
					if( typeof(data.status) != 'undefined' ){ //An error occured
						var errorObject = data;
						//Now we have access to errorObject.status, errorObject.status.message and so on
						//Let's do something with the error object
						return; //Stop parsing function
					} 
					response( $.map( data.geonames, function( item ) {
						return {
							label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryCode,
							value: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryCode,
							lat: item.lat,
							lng: item.lng
						}
					}));
				},
			});
		},
		//Start Search after user types...
		minLength: 2,
		select: function( event, ui ) {
			// Set Location for map
			$( '#lat' ).val( ui.item.lat );
			$( '#lng' ).val( ui.item.lng );
		},
		close: function() {
			//UI plugin not removing loading gif, lets force it
			$( '#city' ).removeClass( "ui-autocomplete-loading" );
		},
	});
  });
3

Now the Javascript question: I’d like to use a conditional to evaluate the returned data so I can format my “label” and “value” based on whether the location returned is from within the US or outside the US.

It needs to happen within the “response” portion of the “success” function but I’m not sure how to achieve this.

I realize this isn’t correct but hopefully this will explain what I’m going for:


success: function( data ) {
	if( typeof(data.status) != 'undefined' ){ //An error occured
		var errorObject = data;
		//Now we have access to errorObject.status, errorObject.status.message and so on
		//Let's do something with the error object
		return; //Stop parsing function
	}
	response( $.map( data.geonames, function( item ) {
		return {
			if( item.countryCode != "US" ){
				// Non-US Locations E.G. Paris, FR
				label: item.name + ", " + item.countryCode,
				value: item.name + ", " + item.countryCode,
			}else{
				// All US Locations E.G. Cincinnati, OH
				label: item.name + ", " + item.adminCode1,
				value: item.name + ", " + item.adminCode1,
			};
			lat: item.lat,
			lng: item.lng
		}
	}));
},

Thanks