两行代码实现一个地址选择器
大家节日快乐，今天早上例行逛 GitHub 时发现一个好东西，来自 Algolia 的开源产品 Places，Algolia 是著名的数据索引服务提供商，Laravel 的文档搜索服务就是基于 Algolia 的。这次他们开源的 Places 产品，可以让你的只需要两行代码，即可使 <input> 变身为一个地址选择器：
支持中文，并且能精确到中国的乡镇级别，集成步骤：
你可以有两种方式来引入 Places：CDN 或者 npm 安装
使用 CDN
<script src="https://cdn.jsdelivr.net/npm/places.js@1.4.15"></script>HTML:
<input type="search" id="address-input" placeholder="Where are we going?" />
<script src="https://cdn.jsdelivr.net/npm/places.js@1.4.15"></script>
<script>
var placesAutocomplete = places({
container: document.querySelector('#address-input')
});
</script>就这样就 OK 了。
使用 npm
准备一个 输入框：
<input type="search" id="address-input" placeholder="Where are we going?" />在你的 js 里引入 places.js
var places = require('places.js');
var placesAutocomplete = places({
container: document.querySelector('#address-input')
});然后在你的页面引入编译的 js 即可。
更多使用方式请自行在官方网站：https://community.algolia.com/places/
或者 GitHub 主页：https://github.com/algolia/places
大家节日快乐，在家多陪陪父母。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2017-10-04，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
内容分发网络 CDN
内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。