This tutorial shows how to filter data for a quick search type ahead.
Some concepts taught:
- managing
Promiseswithfetch ES6 aray spreadingRegExstring filter- using
Array.prototype.mapto turn data into HTML nodes - inserting generated nodes with
element.innerHTML
// turn matched data to a node and then joining it to a string
const html = matchArr.map(place => {
const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`)
const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`)
return `
<li>
<span class="name">${cityName}, ${stateName}</span>
<span class="population">${numberWithCommas(place.population)}</span>
</li>
`
}).join('')