Using autosuggest with geonames

Ryan Ellsworth's Avatar

Ryan Ellsworth

15 Mar, 2012 01:42 AM

Hey guys. Sweet looking plugin. I've been trying all day to figure out how to get this to work with geonames (returns location info). There is a similar example of it working with the jquery autocomplete here http://jqueryui.com/demos/autocomplete/#remote-jsonp but I can't get it to work with autosuggest. Below is what I'm trying but I get nothing for the results and this browser console error: Uncaught TypeError: Cannot read property 'geonames.adminName1' of undefined.

$("#location2").autoSuggest("http://ws.geonames.org/searchJSON", {selectedItemProp: "geonames.adminName1", searchObjProps: "geonames.adminName1", selectedValuesProp : "geonames.name"});

The json returned from geonames looks like this:

{"totalResultsCount":29,"geonames":[{"countryName":"United States","adminCode1":"UT","fclName":"city, village,...","countryCode":"US","lng":-111.6946475,"fcodeName":"populated place","toponymName":"Orem","fcl":"P","name":"Orem","fcode":"PPL","geonameId":5779334,"lat":40.2968979,"adminName1":"Utah","population":88328},{"countryName":"United States","adminCode1":"UT","fclName":"country, state, region,...","countryCode":"US","lng":-111.69912,"fcodeName":"administrative division","toponymName":"City of Orem","fcl":"A","name":"City of Orem","fcode":"ADMD","geonameId":7174024,"lat":40.2987069,"adminName1":"Utah","population":88328}]}

If I manually copy the JSON into a var called data and then use it for the source like this it works:

$("#location2").autoSuggest("data.geonames", {selectedItemProp: "adminName1", searchObjProps: "adminName1", selectedValuesProp : "name"});

Please and thank you!

  1. 1 Posted by Ryan on 15 Mar, 2012 02:17 AM

    Ryan's Avatar

    I would also like to know if it would be possible to combine more than 1 value when a result is selected, like adminName1 + name?

  2. 2 Posted by Ryan on 15 Mar, 2012 05:22 PM

    Ryan's Avatar

    For anyone that has the same problem, I had to map the result to a new array in order for the plugin to be able to loop through it. Similar to the jquery autocomplete example:

    retrieveComplete : function(data) {
        data = $.map( data.geonames, function( item ) {
            return {
                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                value: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName
            }
        })
        return data;
    }
    

    This is helpful for a situation where the json has an array and you need to dig down into it.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac