iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
0
自我挑戰組

JS30自我學習筆記系列 第 7

第六堂 - Type Ahead

這堂課我們要做的是一個動態的關鍵字查詢介面。當我們在介面的輸入框輸入美國城市名或州名等關鍵字,下方列表會快速列出符合關鍵字的城市、州名稱以及人口數。範例如下:

邏輯流程

  1. 將JSON資料存成一個Array
  2. 寫一個字母匹配的函式,其回傳值為匹配成功之Array
  3. 寫一個展示匹配成果的函式,將匹配成功之Array包裝成html
  4. 監聽輸入文字的動作,執行上一步之函式
  5. 將關鍵字highlight,並格式化人口數字

課程重點

  1. fetch():是HTML5的API,用來發送http request。如實作範例中,fetch(URL)回傳的是一個promise物件,我們能用then()來處理這個promise,而then()所回傳的物件仍是promise。promise的_proto_裡面有json()函式,而我們知道目標URL回傳的是JSON,因此在第一個then()中,我們將promise做.json()處理,接著在第二次then()將一筆筆資料放進Array。

  2. match():本實作的重要函式,用來做字串比對,配合Regular Expressions使用。

  3. Regular Expressions:正規表示式,用來設計字串的pattern,進行比對用。例如今天想要在一篇文章中找出含有底線及1~5及小寫英文字的字串(什麼時候會有這種需求),這時候就需要用正規表示式來設計你要的search pattern。

    在實作裡我們用new RegExp(wordToMatch, 'gi');產生pattern。wordToMatch是使用者輸入的字串,也就是說我們要根據這個字串在Array中進行搜尋,判斷是否有包含這個字串的資料。那後面的'gi'是兩個參數g和i,g是global matching,回傳全部符合的字串。i是case-insensitive matching,不分大小寫。另外還有m,multiline matching,能夠在多行搜尋。

  4. join():將Array變成一個string。實作中將join()加入參數'',參數要放的是separator,預設是用逗號分隔。但我們不希望html字串中有逗號,因此用單引號裡面不放東西,就不會有任何分隔符號。

延伸閱讀

  • ES6 spread:在實作中我們看到在fetch資料的時候,做了一件事cities.push(...data),那個"..."就是spread,也就是把data這個Array拆開,一個一個push進cities。若不做spread的話,cities就會變成一個Array裡面還有一個data Array。
  • 格式化數字:實作中最後步驟就是把一串人口數字給格式化,變成每三位數一個逗號,方便閱讀。這時候就需要Regular Expression,而老師也是直接貼一段code給大家複製。以下是格式化數字的範例:
    unction numberWithCommas(x) {
         return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
       }
    ``
    
    

參考來源


上一篇
第五堂 - Flex Panel Gallery
下一篇
第七堂 - Array Cardio Day 2
系列文
JS30自我學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言