如何创建包含国家/地区所有城市的输入列表 html5？有可能吗？

Question

我觉得这很难... 我想让用户有可能插入一个世界城市并查看它周围的最后一次地震。问题是如何创建包含所有城市的输入列表。

在我的表单中，用户必须在插入国家之前： 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>

而且这个 jsfiddle 工作得很好...

但是要插入城市是个大问题，怎么可能？我如何找到包含世界所有城市及其纬度、经度和城市名称（region/province）的良好数据库？

无论如何，我无法在我的页面中插入所有城市，所以我想使用 javascript.

加载包含插入国家/地区的所有城市的单个文件

是个好主意吗？

我想要很多建议，重要的是不减慢代码和页面速度的解决方案。表演很重要。

非常感谢，抱歉我的英语不好

Answer 1

我强烈建议您从 API.

动态加载 countries 或 cities 的列表

你可以看看google API and the Teleport API

Answer 2

https://raw.githubusercontent.com/lutangar/cities.json/master/cities.json 这是一个包含世界所有城市的 link 到 json 文件使用 jquery 和 ajax，您可以提取数据，如下所示 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');
    }
});

});

请务必在您的 html 文件中包含 jQuery

另请注意，您在这里处理大量数据，涉及数千个城市，因此您的浏览器需要一段时间才能加载它，您可能需要考虑将数据分解成块以提供帮助分配任务。

Answer 3

您可以尝试使用带有 google 地图的自动完成地址表单 API 作为替代方法。见 https://infinitricks.com/common-post/create-place-auto-complete-address-form-with-google-maps-api/ 。谢谢

如何创建包含国家/地区所有城市的输入列表 html5？有可能吗？

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

javascript

html

performance

country