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

【问题标题】：How create an input list html5 with all cities of country ? Is possible?如何创建包含国家所有城市的输入列表 html5？有可能吗？
【发布时间】：2018-03-31 14:10:16
【问题描述】：

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

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

但是插入城市是个大问题，怎么可能？我怎样才能找到世界上所有城市的经纬度和城市名称（地区/省）的良好数据库？

无论如何，我无法在我的页面中插入所有城市，所以我曾考虑使用 javascript 加载包含插入国家/地区所有城市的单个文件。

是个好主意吗？

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

非常感谢，对不起我的英语

【问题讨论】：

How can i find good database? google.it Is a good idea? 不，世界很大。
太大 :( :( 有没有 API 的方法，关于 html5 或谷歌地图的东西？没有
我看到两个问题：1）究竟什么是“附近”？您是否将有一个下拉菜单以允许用户从他们选择的城市中选择一个半径。 2）一个国家有多个城市可以有相同的名字。例如。马萨诸塞州的斯普林菲尔德、俄勒冈州、伊利诺伊州以及荷马居住的任何州。我会改用纬度/经度

标签： javascript html performance country

【解决方案1】：

我强烈建议您从 API 动态加载 countries 或 cities 列表。

你可以看看google API和Teleport API

【讨论】：

这是 google 地方 API 的一个示例：developers.google.com/maps/documentation/javascript/examples/…
Teleport API 非常棒。感谢您的发现！

【解决方案2】：

https://raw.githubusercontent.com/lutangar/cities.json/master/cities.json 这是一个包含世界所有城市的 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

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

【讨论】：

【解决方案3】：

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

【讨论】：