Question

I am currently using a single INPUT field to trigger jQuery UI Autocomplete, which pulls data from Geonames.

$( "#city_state_country" ).autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: "http://ws.geonames.org/searchJSON",
            dataType: "jsonp",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 6,
                name_startsWith: request.term
            },
            success: function( data ) {
                response( $.map( data.geonames, function( item ) {
                    return {
                        label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                        value: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                    }
                }));
            }
        });
    },
    minLength: 3,
    select: function( event, ui ) {
        log( ui.item ?
            "Selected: " + ui.item.label :
            "Nothing selected, input was " + this.value);
    },
    open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
    },
    close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
    }
});

So if I begin to type “Bosto”

it provides me with

Boston, Massachusetts, United States

But I would like to have separate INPUT fields for city, state and country — and each of them with autocomplete hooked up to Geonames returning only suggestions for city, state, country respectively.

So typing:

"Bost" in the city INPUT would provide "Boston".
"Massa" in the state INPUT would provide "Massachusetts".
"United St" in the state INPUT would provide "United States".

Is this possible?

I’ve experimented with changing name_startsWith to other options but didn’t get what I expected.

Answer 1

According to the documentation, http://www.geonames.org/export/web-services.html, you can’t