How to make the cities/countries dropdown like facebook does?

Question

See the screenshot here:

I'd like the user to just type a city or country name and the autocompleter will show suggested items.

How should I start for creating it? Are there any API(s) or web services for me to call? Where can I find the database of all cities/countries in the world?

score 4 · Accepted Answer · answered Feb 26 '12 at 12:18

4

I think this would be the best database for your situation, check it out:

http://www.geodatasource.com/cities-free.html

answered Feb 26 '12 at 12:18

Alex

5,971
11
42
80

Thanks Ali, it's really useful to me. – Atthapon Junpun-eak Feb 26 '12 at 16:29
1

what about flagging it as the right answer and giving me a vote up – Alex Feb 26 '12 at 16:54
Link is now broken – luke_t Feb 21 '17 at 21:59

score 2 · Answer 2 · edited May 23 '17 at 11:48

You first need a autocomplete plugin.
I recommend to use the jQuery-Ui Auto Complete Plugin.

The database could as example be this, but eventually try to search a bit for yourself.
There was already a question on stackoverflow about a database for cities of the world.
A simple text file with all cities may also be this.
There are very much of those libraries, but you have to chose the right one for you.

score 0 · Answer 3 · answered Feb 26 '12 at 12:20

My solution may not be the best, but it's a starting point: Google a list with all countries (ISO-Standard), paste it into a txt-file. Then you can simply read that file with PHP an create a select menu with the contents of the file. It does not incorporate the cities, but maybe it helps you in some way.

How to make the cities/countries dropdown like facebook does?

3 Answers3