How create an input list html5 with all cities of country ? Is possible?

Question

I think this is very difficult... I want to give the user the possibility to insert a city of world and see last earthquakes around it. The problem is how create an input list with all cities.

In my form the user must before insert the country: http://jsfiddle.net/Dimcho/LUZvS/

<div class="datalist-holder">
    <input list="country" name="country" class="datalist-input" />
    <datalist id="country">
        <option value="Afghanistan" />
        <option value="Albania" />
        <option value="Algeria" />
        <option value="American Samoa" />
        <option value="Andorra" />
        //...
        //...
    </datalist>
 </div>

and this jsfiddle works very well...

but to insert the city it's a big problem, how is possible ? How can i find good database with all cities of world with its latitude, longitude and name of city (with region/province) ?

Anyway i can't insert all cities in my page so I had thought to load a single file with all cities of inserted country using javascript .

Is a good idea?

I would like a lot of advice, the important thing are solutions that do not slow down the code and the page. The performances are very important.

Thanks a lot and sorry for my english

Answer 1

I would highly suggest you to load the list of countries or cities dynamically from an API.

You can have a look at the google API and the Teleport API

Answer 2

https://raw.githubusercontent.com/lutangar/cities.json/master/cities.json This is a link to a json file containing all the cities of the world using jquery and ajax, you can pull in the data as seen below HTML

<select id="cities">
    <option value="--Select a City--">--Select a City--</option>
</select>

Javascript

$(document).ready(function() {
var results = $.getJSON("cities.json", function(data) {
    for(var i = 0; i < data.length; i++) {
        $("#cities").append('<option value="' + data[i].name + '">' + data[i].name + '</option');
    }
});

});

Be sure to include jQuery in your html file

Also be aware that you are working with a massive amount of data here, thousands of cities, so it will take you browser a while to load it, you might want to look into breaking the data down into chunks to help portion the task out.

Answer 3

you can try to use auto complete address form with google maps API for alternative way. see https://infinitricks.com/common-post/create-place-auto-complete-address-form-with-google-maps-api/ . Thank's