【JS30】Day06:Ajax Type Ahead

javascript 30day

目標:完成搜尋功能,並在搜尋關鍵字加上顏色辨識。

一、首先將目標 json 指定為變數,使用fetch方法取得資料,塞進空陣列。

fetch('目標url', HeadersObject)
.then(function(response) {
//處理 response
})
.catch(function(err) {
// Error :(
});

二、建立一個RegExp,使用match方法進行比對。

function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

// 利用正規表示法,在人口數量增加逗點

function displayMatches() {
const matchArray = findMatches(this.value, cities);
//輸入值
const html = matchArray
.map(place => {
const regex = new RegExp(this.value, 'gi');
// 呼叫 RegExp 物件的建構函式
const cityName = place.city.replace(regex, `<span class="hl">${this.value}`);
const stateName = place.state.replace(regex, `<span class="hl">${this.value}`);
return `
<li>
<span class="name">${cityName}, ${stateName}
<span class="population">${numberWithCommas(place.population)}
</li>
`;
})
.join('');
suggestions.innerHTML = html;
}

三、監聽changekeyup事件,讓鍵盤在輸入時觸發比對。

searchInput.addEventListener('change', displayMatches);
searchInput.addEventListener('keyup', displayMatches);

使用技巧

  • fetch / then / catch / blob
  • spread 展開運算子 ( es6 )
  • regExp ( 正規表達式 )
  • match
  • replace
【ES6】陣列麻吉罵上篇:ForEach、Filter、Map、Reduce 【JS30】Day05:Flex Panel Gallery

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×