iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 28
0
Modern Web

菜鳥前端奮鬥史(欸?系列 第 28

Day28 「使用網頁等公車」 ─ 就來做搜尋功能囉!

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20180116/20107640DJT4AZIkLP.jpg
隊友的文章被推上臉書啦,可口可樂(喂 /images/emoticon/emoticon42.gif
不得不讚賞一下 Jason 的學習力
從剛來的時候連 HTML、CSS 是什麼都不知道,到現在已經能刻版跟自己寫一些 JS code 了,了不起!

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

 
不知不覺來到28天了,再兩天就不用怕洗澡的時候才想起來自己還沒發文,披著浴巾就先衝出來發卡位文了(誰叫你 /images/emoticon/emoticon21.gif

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

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

欸,不過好像漏了什麼東西..?/images/emoticon/emoticon19.gif

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

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

開放原始碼

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));

註解當中有講到, functioninput 事件(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 迴圈將其打印回網頁上,即大功告成! /images/emoticon/emoticon01.gif


補充資料


>>隊友任意門<<

我是小菜鳥阿陰,我們下次見!


上一篇
Day27 「使用 setInterval 排程囉」 ─ 嗯?好像不太對勁啊..?
下一篇
Day29 「即將步入尾聲」 ─ 菜鳥的前端學習資源大公開!
系列文
菜鳥前端奮鬥史(欸?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言