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

尚未有邦友留言

立即登入留言