【JS30-6】Ajax Type Ahead

更新於 發佈於 閱讀時間約 1 分鐘
raw-image


JavaScript30 傳送門:https://javascript30.com/


寫到挑戰六覺得心累ㄌ,向來不是一個可以長久堅持好習慣的人,30 個挑戰聽起來很少,但如果要日復一日堅持下去其實好長r 😮‍💨


挑戰六透過 input 來 filter 從 api 拿回來的資料結果,然後再後製 & 渲染到畫面。
看別人的成果:yhabib.github.io


本次練習の心得:

這次又是直接埋頭苦幹,沒有先釐清需求目標有哪些,函式寫起來亂七八糟,methods 也是亂用。
例如在匹配字串時,比起用 String.includes() 然後再轉換一堆沒用的大小寫,用正規表達式才是更好的作法!如果能冷靜下來考慮更多情境,就能減少一開始就走歪路的機率。

算了,我就是這樣心浮氣躁^_^

留言
avatar-img
留言分享你的想法!
avatar-img
hunwooooof
1會員
6內容數
肚子餓了
hunwooooof的其他內容
2024/05/29
JavaScript30 傳送門:https://javascript30.com/ 挑戰5透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果,看別人的成果:yhabib.github.io 本次學習心得: 製造過度效果延遲的方法:transition-delay V.S
Thumbnail
2024/05/29
JavaScript30 傳送門:https://javascript30.com/ 挑戰5透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果,看別人的成果:yhabib.github.io 本次學習心得: 製造過度效果延遲的方法:transition-delay V.S
Thumbnail
2024/05/28
JavaScript30 傳送門:https://javascript30.com/ Console.table 第四個練習是透過一些 array method 來操作 array 資料。 整個練習最讓我 WOW 的,是 console.table,竟然有這麼酷的 console
Thumbnail
2024/05/28
JavaScript30 傳送門:https://javascript30.com/ Console.table 第四個練習是透過一些 array method 來操作 array 資料。 整個練習最讓我 WOW 的,是 console.table,竟然有這麼酷的 console
Thumbnail
2024/05/17
JavaScript30 傳送門:https://javascript30.com/ 透過 JS 控制 CSS 變數 今天的挑戰是要能透過滑動圖片上面的 <input type="range"> 來改變圖片的三個屬性。 以前在 CSS 裡面看到 var(--xxxx) 這種東西都很
Thumbnail
2024/05/17
JavaScript30 傳送門:https://javascript30.com/ 透過 JS 控制 CSS 變數 今天的挑戰是要能透過滑動圖片上面的 <input type="range"> 來改變圖片的三個屬性。 以前在 CSS 裡面看到 var(--xxxx) 這種東西都很
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
字數剛好3000字:) 按發布的時候突然當掉嚇歪本咚 還好沒有不見
Thumbnail
字數剛好3000字:) 按發布的時候突然當掉嚇歪本咚 還好沒有不見
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 寫到挑戰六覺得心累ㄌ,向來不是一個可以長久堅持好習慣的人,30 個挑戰聽起來很少,但如果要日復一日堅持下去其實好長r 😮‍💨 挑戰六透過 input 來 filter 從 api 拿回來的資料結
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 寫到挑戰六覺得心累ㄌ,向來不是一個可以長久堅持好習慣的人,30 個挑戰聽起來很少,但如果要日復一日堅持下去其實好長r 😮‍💨 挑戰六透過 input 來 filter 從 api 拿回來的資料結
Thumbnail
大家好,好久沒更新,最近教學論命繁忙,這邊有所耽擱,真的抱歉。 最近也有跟設計師在討論要架官網,時間真的是不夠用了,因此方格子這邊我會先暫停一下,架好官網之後會將文章轉移到官網,至於會不會有收費文章,這邊我還再思考當中。 如果想看我最新的貼文,可以轉到我的社群上面去。目前是每周二晚上八點發放貼文
Thumbnail
大家好,好久沒更新,最近教學論命繁忙,這邊有所耽擱,真的抱歉。 最近也有跟設計師在討論要架官網,時間真的是不夠用了,因此方格子這邊我會先暫停一下,架好官網之後會將文章轉移到官網,至於會不會有收費文章,這邊我還再思考當中。 如果想看我最新的貼文,可以轉到我的社群上面去。目前是每周二晚上八點發放貼文
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 挑戰5透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果,看別人的成果:yhabib.github.io 本次學習心得: 製造過度效果延遲的方法:transition-delay V.S
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 挑戰5透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果,看別人的成果:yhabib.github.io 本次學習心得: 製造過度效果延遲的方法:transition-delay V.S
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News