JQuery: How to AutoComplete "City, State"?

There's a group called GeoNames that offers both downloadable databases and free webservices to obtain this type of data. For example, the search

http://ws.geonames.org/searchJSON?name_startsWith=Chic&country=US

will return a bunch of JSON that includes Chicago, IL (JSON properties include, among others, "name":"Chicago" and "adminCode1":"IL").

As it happens, the jQuery UI folks used this datasource for a demo of autocomplete. (Thanks NickT for the link).

You either need to make an ajax call to the server whenever a key is pressed to update the "auto complete" drop down, or include an array of all the possible "city-state" strings and filter them when a key is pressed.

@Teleport offers an API to search cities by name, e.g.:https://api.teleport.org/api/cities/?search=San,%20United%20States%20of%20America returns San Antonio, San Diego, San Jose and San Francisco. You can also pass state, e.g. https://api.teleport.org/api/cities/?search=San,%20Tex,%20United%20States%20of%20America only returns San Antonio. And you can also search by aiport codes (e.g. SFO) and other "aliases".

There's also an autocomplete widget for this API available at https://github.com/teleport/autocomplete

Disclosure: I work for Teleport.

EDIT: Added "of America" suffix in the "United States of America" search term, as some other countries (Brazil, Venezuela) have name forms that match "United States".