這次的資料處理，真的花很多時間做出一個serach，
真的覺得這個javescript30 很推薦給所有想要學習的，
雖然都不是前後有關聯的東西，但卻又都有著隱形的線，
只要每一個主題都好好的練會，到最後就會都接起來了，
花了很多時間在查資料，不過真的全部都知道是什麼之後真的很有成就感，
原來慢慢變成自己想要成為的那個樣子，是這麼充實的。

這次學到了ES6很關鍵的一個技術，將html直接寫在js裡面，就可以做變數處理，就不用在css裡面使用transform, 再寫一個transitionend的function，
越來越知道之前前輩說的，寫得很快就只是一個寫得很快的工程師，
別人不會覺得妳特別厲害，因為你就只是快而已的意思是什麼了，
雖然這不是什麼厲害的技巧，但對我來說已經是一個從寫得快變成寫得好的經驗了。

真的建議大家，在練習的時候，可以自己把css, html練熟，版型都自己刻一遍，累積自己的硬實力，把基礎打好一點，因為這樣在debug的時候更可以知道設計原理，雖然未來可能都會給你一個desinger, 但懂的越多知道得越多更可以解決更多的問題。

這次在寫

開始練習react了！！不知道什麼時候可以獨當一面

這中間發生了很多事情，心情很down也很up，好久沒有拍自己的照片，發現出社會不到兩年，真的變老了許多，眼中好像沒有大學時青澀的光了。

06 - Type Ahead

首次上傳：2020/09/20

主題

利用fetch()來取回json檔案，並透過filter()及RegExp()等語法來製作搜尋即時顯示關聯效果！

步驟

Step1

預設已經有建立了一個城市的.json清單，
先建立一個空的陣列cities並透過fetch來取得json資料存進去。

Step2

建立function findMatches(wordToMatch, cities)
裡面建立了一個RegExp用於match來進行字串比對

Step3

建立findMatches()並用inputHandler來監測輸入框的change&keyup，
每次鍵盤輸入時都會觸發displeyMatches()來處理比對，
將比對結果用map來return 組合的HTML的<li>資料，

Javascript語法&備註

fetch()

操作心得待補…

我原先只用過XMLHttpRequest來取資料，關於promise及fetch的操作目前並不熟悉。
參閱：MDN-fetch

RegExp()

正規表達式，這個真的非常複雜…
我有做紀錄的就是參數後面g代表全部, i代表不分大小寫..

參閱:MDN-RegExp

補充: 可以試試看toLocaleString()

可以將 RegExp() 先包裝成一個function, 再丟入別的function做valiable判斷

function numberWithCommas(x) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
<li>
    <span class="name">${cityName}, ${stateName}</span>
    <span class="population">${numberWithCommas(place.population)}</span>
</li>

//簡易版 範例 去找到所有的e, 代換成E
let name = elva
let regexp = new RegExp('e', 'gi')
name.replace(regexp, 'E')
// console elva -> Elva

.join()

將陣列資料用參數內的字串連接轉為一個字串，
範例中上了join('')來避免map回傳的陣列有,產生。

CSS語法&備註

nth-child()

範例中利用nth-child(odd)與nth-child(even)來抓li的奇偶數

參閱：MDN-:nth-child

探索

加個排序

最簡單的小調整，加個.sort()讓搜尋結果進行排序顯示

function displayMatches() {
    const matchArray = findMatches(this.value, cities);
    const html = matchArray.map(place => {
    const regex = new RegExp(this.value, 'gi');
    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>`;
    }).sort().join('');
    suggestions.innerHTML = html;
}

[DEMO]

BobChochola's Note

JavaScript-Type-Ahead-06