[筆記][JS30天-Day06] Ajax Type Ahead

實做：fetch api 搭配 filter 實現關鍵字篩選器

---

學習重點

• 利用 Fetch API 取得資料
• 使用 filter 搭配正規表達式篩選資料
• input 事件和 change 事件
• 關鍵字上色

---

解說

• 利用 Fetch API 取得資料

  • 使用 fecth API 會回傳 Promise ，第一個回傳的是一個 readableStream，將它解析成 json 後來讀取

    let cities = []
    const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'
    
    fetch(endpoint)
    .then(blob => blob.json())    // 取得 readableStream，並轉成 json 後 return
    .then(data=> cities.push(...data)); //把 data 給 cities

• 使用正規表達式篩選資料

  1. 利用 new RegExp(regex, flag) 來建立正規式：
     第一個參數: 正規表達式的內容
     第二個參數: flag
     – g 表示 global search，也就是會去找整份文件，而不是找到就停
     – i 表示 case insensitive，也就是不去區分大小寫

     let regex = new RegExp(wordToMatch, 'gi')

  2. 使用 String.prototype.match(regexp) 這個方法來判斷給的字串當中是否有符合該 regexp 的內容，符合會回傳陣列，否則回傳 null。

     function findMatch (wordToMatch, cities) {
         return cities.filter(place => {
             let regex = new RegExp(wordToMatch, 'gi')
             return place.city.match(regex) || place.state.match(regex)
         })
     }

     filter用法可以參考這篇 [筆記][JS30天-Day04] Array Cardio Day1

  3. 使用 String.prototype.replace(regex|substr, newSubstr) 來置換內容,並在此時用html tag加上class達到 關鍵字背景色 的效果

     const regex = new RegExp(e.target.value, 'gi');
     /* 加上class達到 `關鍵字背景色` 的效果 */
     const cityNameHighlight = place.city.replace(regex, `<span class="hl">${e.target.value}</span>`) ;
     const stateNameHighlight = place.state.replace(regex, `<span class="hl">${e.target.value}</span>`) ;
     

• input 事件和 change 事件的差異
  • input event 會在任何元素值改變的時候被出發（例如每打一個字都會觸發一次）
  • change event 則是會在有元素值改變，且該元素脫離 focus 狀態時才觸發

補充

Fetch_API

線上讀書會-regex 快速入門（承億主講）