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

day06: Type-Ahead

XAMPP下载 admin 587浏览 0评论

QQ截图20181015160507

 這次的東西好陌生啊完全沒聽過QQ
以前呼叫api 都用XMLHttpRequest或是jQuery
但是搜尋了一下發現axios套件好像很可以!
哈哈哈哈又要研究囉 下次用用看^^

使用者操作需求
使用者在輸入框內輸入關鍵字,即時過濾出符合的城市,並且列表的關鍵字上會有螢光筆樣式

技術重點
使用fetch()接收資料
使用promise.then()處理promise物件
正規表達式RegExp()
將陣列資料用join參數內定義的字串(或符號),將其連接轉為一個字串join()
流程步驟
預先知道api回傳為城市的JSON資料
先建立一個空的陣列cities 用來存放資料
用fetch取得API JSON資料,並push至cities陣列
建立function findMatches() 用於比對輸入的關鍵字
建立function displayMatches() 並設定監聽輸入框的change&keyup
在displayMatches()裡呼叫findMatches()進行比對,並將回傳資料組合成HTML display在頁面上
範例語法備註
[ fetch() ]
回傳的事promise物件,所以要對promise進行操作
詳細請看
範例中有示範這行

const prom = fetch(endpoint);
console.log(prom);
// 回傳不是data 是promise, 所以要操作promise
[ promise.then() ]
對promise物件進行工作,可以接接接 像水管一樣

fetch(endpoint)
.then(blob => blob.json())
.then(data => cities.push(…data));
使用fetch()取得api資料後
用then()來操作回傳的promise資料
可以先用fetch(endpointen).then(blob=> console.log(blob))
印出Response會發現需要抓取裡面的JSON,在__photo__:Response/json
所以寫成.then(blob => blob.json())並且逐筆push至cities中
data前面的…就是逐筆的寫法

[ RegExp() ]
正規表達式.. 好複雜呀 大概查了一下
後面的參數g代表全部,i代表不分大小寫

[ arrayObj.join() ]
將陣列組合成一個字串,並且以join中的參數做為分隔
在這裡因為map()逐筆回傳的資料都是陣列形式並且中間以逗點區分
但為了要放入HTML中
所以將它轉為字串並且以空格作為每筆的區分

const html = matchArray.map(place => {
return `
<li>
<span class=”name”>${cityName}, ${stateName}</span>
<span class=”population”>${numberWithCommas(place.population)}</span>
<>
`;
}).join(”);
處理百進位逗點function()
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ‘,’);
}

转载请注明:XAMPP中文组官网 » day06: Type-Ahead

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