Alex老師的教學
感覺正則表達式超複雜...

先抓取資料

const url = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';

// 方法1
 let res = new XMLHttpRequest();
res.addEventListener('load',resHandler);
res.open('get',url);
res.send(null);

 function resHandler() {
     console.log(JSON.parse(this.response)); //轉JSON物件
 }

// 方法2 - 兩種存入資料的方法
const allData =[]; 
let allData2 = null;
fetch(url).then(item => {
    return item.json();
}).then(data => {
    // console.log(data);
    allData.push(...data); //用push存入空陣列
    // console.log(allData);
    allData2 = data; //直接把取得的資料放入預設的變數
    // console.log(allData2); 
});

製作監聽，使用鍵盤輸入

search.addEventListener('keyup', inputHandler); //鍵盤輸入

let findMatches = (word, data) => {
    return data.filter(place => {
        const regex = new RegExp(word, 'gi');
        //比對符合自訂規則的字
        //g = 全域搜尋
        //i = 不分大小寫
        return place.city.match(regex) || place.state.match(regex);
        //回傳符合正則表達式的結果
    })
}

function inputHandler() {
    // console.log('b');
    const matchArray = findMatches(this.value, allData);
    //上方的方訊帶入資料
    console.log(matchArray);//可以輸入並觀察console的變化
}

製作要放入畫面的字串

function inputHandler() {
(略)
    const html = matchArray.map(place => {
        const regex = new RegExp(this.value, 'gi');
        // 全域搜尋所輸入的資料
        const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
        //replace() = 用正則搜尋後替換內容
        const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
        // console.log(cityName);
        return `<li>
                    <span class="name">${cityName}, ${stateName}</span>
                    <span class="population">${numberWithCommas(place.population)}</span>
                </li>`;
    }).join('');
    //用空字串隔開是讓資料加在一起做成字串，資料是指`<li></li>`這段
    //如果不指定只用()，就是加上逗點隔開

}

其中有個numberWithCommas方訊，內容是：

let numberWithCommas = x => {
    // 方法1
    // return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    //正則表達式
    
    // 方法2
    return (x * 1).toLocaleString();
    // 回傳時加入該字串在特定語言下的表示符號
    // ()中可以設定格式
    // 目前的資料直接使用此方法會有問題，因為population的數字是字串
    // 所以 *1 讓字串轉為數字即可使用
}

最後把資料放入畫面就完成了

const show = document.querySelector('.suggestions'); //ul

function inputHandler() {
    const matchArray = findMatches(this.value, allData);
    const html = matchArray.map(place => {
(略)
    }).join('');
    show.innerHTML = html;
}

連結