iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 29
0
Modern Web

30天學習30套前端技術(2018年)系列 第 29

[十分鐘學習] Algolia Places - 強化地址輸入欄位

example1

Algolia Places為您的網站提供一個快速、簡單的方式,自動化產生地址建議列表的JavaScript函式庫

GitHub Star: 4,200
Javascripting Overall: -
瀏覽器: ChromeFirefoxIE10+
RWD: 支援
License: MIT


《安裝》

  • CDN

    <!-- Algolia Places v1.4.18 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/places.js/1.4.18/places.min.js"></script>
    
  • npm

      $ npm install places.js --save
    

《範例》

  • 顯示建議地址列表

    <input type="search" id="address" placeholder="你想去哪" />
    <p>你選擇的位置: <strong id="address-value"></strong></p>
    <script>
    	var placesAutocomplete = places({
    		container: document.querySelector( "#address" ) // 輸入欄位
    	});
    	placesAutocomplete.on( "change", function(e) {
    		document.querySelector( "#address-value" ).textContent = e.suggestion.value  // 選擇後賦予值得欄位
    	});
    </script>
    

《延伸》

  1. Algolia Places
  2. algolia/places: Turn any into an address autocomplete

上一篇
[十分鐘學習] Muuri - 網站Layout大躍進
下一篇
[十分鐘學習] lightgallery.js - 燈箱
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言