SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Autocomplete/JSON w/GeoNames for city search

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

    Code JavaScript:
      $(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. #2
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, it seems that the following will return what I'm looking for:
    Code JavaScript:
      $(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. #3
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code JavaScript:
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •