[Day6] Ajax Type Ahead

輸入框篩選器製作

需要用到的技巧與練習目標

1. fetch
2. 展開運算符Spread syntax (...)
3. match
4. 整規表達式 RegExp
5. replace()

製作步驟與流程

1. 運用fetch方法來獲取資料
2. 用展開運算符的方式整理data
3. 運用filter比對出輸入文字以及與數據相同的資料
   3-1. 運用整規表達式來獲取輸入的字串
   3-2. 用match的方式比對數據並且回傳
4. 運用監聽方式 change/keyup 執行篩選條件並且運用innerHTML放入
   4-1. 運用map方式 製作需要放上網頁的html結構
   4-2. 運用replace來重新組合字串

fetch

fetch 為 ES6 的新語法，是搭配 Promise的方法來執行請求網站和請求後獲取Response的處理方式。

GET
GET 是 fetch 預設的請求語法

fetch('抓取資訊的網址')
 .then(function(response) {
   return response.json();
 })
 .then(function(myJson) {
   console.log(myJson);
 });

fetch 接收一個url作為參數，並且用then接收，請求的相關訊息。.json為回傳的資料以物件的方式並將資料傳給第二個then，在console中印出來。

參考資料來源:
https://medium.com/enjoy-life-enjoy-coding/jacascript-fetch-%E8%AE%93-es6-%E6%93%81%E6%9C%89%E4%B8%80%E5%B0%8D%E7%BF%85%E8%86%80-%E5%9F%BA%E7%A4%8E%E6%95%99%E5%AD%B8-2f98efe55ba4
https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API/Using_Fetch
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/RegExp

https://5xruby.tw/posts/15min-regular-expression
https://www.fooish.com/javascript/string/replace.html