Background
For the country field, the system detects and defaults to Canada. For the city field, the user types a Canadian city name, populated Facebook-style.
Both the country list and city list are populated using AJAX and JSON, sourced from a remote database using a proxy (queried via PHP).
The country is defaulted to the user's country of origin using MaxMind's GeoIP PHP API.
When the user selects a different country, its two-letter ISO code must be passed as a parameter to the city input so that the query that drives it can search for cities in the selected country.
For example, a user whose IP address is in Canada can choose the United States. When this happens:
- the city field will be erased;
- the city field gains focus; and then
- only U.S. cities are displayed (as the user types).
Problem
The following PHP snippet proxies retrieval of the city list to a remote server:
echo file_get_contents( 'http://server/city.dhtml?q=' .
urlencode( $_GET['q'] ) );
The jQuery tokenInput function does not seem to provide a mechanism to pass additional content. The relevant jQuery snippets follow.
Acquire Countries
The following code gets a country code and a list of countries. It sets the user's country as the default country.
// Where in the world?
$.getJSON( 'geoip.dhtml', function( data ) {
country = data[0].id;
});
// Select from countries that have significant amounts of data.
$.getJSON( 'country.dhtml', function( data ) {
var h = '';
var len = data.length;
for( var i = 0; i < len; i++ ) {
var s = '';
// Make the person's own country the default selection.
if( data[i].id == country ) {
s = '" selected="selected"';
}
h += '<option value="' + data[i].id + s + '">' + data[i].name + '</option>';
}
$('#country').html(h);
});
Acquire Cities
The following code downloads the list of cities. The tokenInput
function automatically passes the q
parameter to the code inside the "local version" of city.dhtml
(the PHP source code snippet is shown above). The q
parameter is the text that the user types for the city.
$('#city').tokenInput( 'city.dhtml', {
hintText: "Type a city name.",
tokenLimit: 1,
classes: {
tokenList: "token-input-list-facebook",
token: "token-input-token-facebook",
tokenDelete: "token-input-delete-token-facebook",
selectedToken: "token-input-selected-token-facebook",
highlightedToken: "token-input-highlighted-token-facebook",
dropdown: "token-input-dropdown-facebook",
dropdownItem: "token-input-dropdown-item-facebook",
dropdownItem2: "token-input-dropdown-item2-facebook",
selectedDropdownItem: "token-input-selected-dropdown-item-facebook",
inputToken: "token-input-input-token-facebook"
}
});
The city.dhtml
must to filter the cities by country code.
Question
How would you provide the country code to city.dhtml
, without using a cookie?
Ideas
The latest version of the token input supports JSONP, would that be useful?
Thank you!