大家节日快乐,今天早上例行逛 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
大家节日快乐,在家多陪陪父母。