最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

第六堂 – Type Ahead

XAMPP下载 admin 470浏览 0评论

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

QQ截图20181023163840

 邏輯流程
將JSON資料存成一個Array
寫一個字母匹配的函式,其回傳值為匹配成功之Array
寫一個展示匹配成果的函式,將匹配成功之Array包裝成html
監聽輸入文字的動作,執行上一步之函式
將關鍵字highlight,並格式化人口數字
課程重點
fetch():是HTML5的API,用來發送http request。如實作範例中,fetch(URL)回傳的是一個promise物件,我們能用then()來處理這個promise,而then()所回傳的物件仍是promise。promise的_proto_裡面有json()函式,而我們知道目標URL回傳的是JSON,因此在第一個then()中,我們將promise做.json()處理,接著在第二次then()將一筆筆資料放進Array。

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

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,能夠在多行搜尋。

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給大家複製。以下是格式化數字的範例:
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ‘,’);
}

转载请注明:XAMPP中文组官网 » 第六堂 – Type Ahead

您必须 登录 才能发表评论!