隊友的文章被推上臉書啦，可口可樂（喂
不得不讚賞一下 Jason 的學習力
從剛來的時候連 HTML、CSS 是什麼都不知道，到現在已經能刻版跟自己寫一些 JS code 了，了不起！

順便推一下這場活動的講者之一也是我們的組員 ── 正妹設計師 GG
她的活動分享在此
也歡迎大家多過去捧捧場兩位！
　

　
不知不覺來到28天了，再兩天就不用怕洗澡的時候才想起來自己還沒發文，披著浴巾就先衝出來發卡位文了（誰叫你

昨天我們讓整個公車動態資訊系統有了初步完整的功能了

• 完整公車路線
• 查詢點選的公車路線動態資料（各站的預估到站時間）

欸，不過好像漏了什麼東西..？

啊...原來是搜尋路線的功能沒做啊！

為了便利使用者快速搜尋我們的公車路線，就來實裝功能吧！

開放原始碼

var search = document.querySelector('.search');
search.addEventListener('input',searchBus,false); //input屬性 = 使用者每次操作都跑一次 function

function searchBus() {
    var searchVu = search.value; // searchVu 為使用者輸入的路線號
    // console.log(searchVu); // 檢查是否有正確綁定使用者輸入的路線好

    function filterItems(searchVu) {
        return data.filter(function (i) { // 此處的 data 即完整的路線列表陣列
            return i.SubRoutes[0].SubRouteName.Zh_tw.indexOf(searchVu.toUpperCase()) == 0;
            // 撈出開頭符合使用者搜尋的資料
            // .toUpperCase() 強制轉大寫
        })
    }
    // console.log(filterItems(searchVu));

註解當中有講到， function 的 input 事件(event)跟 click 這種只針對點擊當下的事件不同，可以讓使用者每次操作時都執行一次 function

這邊比較特別的是我們使用了 Array.filter 這種陣列運算方法

filter() 方法會建立一個經指定之函式運算後，由原陣列中通過該函式檢驗之元素所構成的新陣列。

我們的 data 是完整路線資料的陣列
再經過我們的 filter 後，我們想要要求它返還所有從開頭開始吻合使用者輸入的資料
故使用 .indexOf() == 0 而非傳統上使用的 .indexOf() > -1

• 若使用 .indexOf() > -1 ，則使用者輸入 3 時，所有路線號中含有 3 的路線都會被返還(如 103 、 237 、 315 ..等)
• 若使用 .indexOf() == 0 ，則使用者輸入 3 時，返還所有路線號中以 3 為開頭的路線 (如 3 、 30 、301副 ..等)

再經歷以上程序後，我們產出一個 (filterItems(searchVu) 陣列，也就是使用者搜尋後產生的路線號陣列
(也別忘了先使用 console.log() 檢查一下資料對不對唷！)
之後我們再使用 for 迴圈將其打印回網頁上，即大功告成！

補充資料

• HTML DOM 事件列表
• Array.prototype.filter() - MDN
• Array.filter()過濾陣列元素 - 維克的煩惱
• JavaScript 陣列處理方法 - 六角學院
• JavaScript indexOf() 方法 - W3School

>>隊友任意門<<

• Jason 勇者Jason和前端之鑰
• Clover 用Vue與firebase開發訂便當系統實錄
• aflect 我的UI/UX奮鬥屎
• GG 一隻巨大的UI/UX菜鳥
• Jimmy ES666
• R-yin 菜鳥前端奮鬥史(欸?

我是小菜鳥阿陰，我們下次見！