[JS30]DAY06 : Type Ahead - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 7

0

Modern Web

JS煉金術：Javascript30+聲光玩轉的Drum Pads系列第 7 篇

[JS30]DAY06 : Type Ahead

11th鐵人賽 javascript

2019-09-21 23:48:45

582 瀏覽

分享至

[程式碼&DEMO] [HackMD完整筆記]

目標

製作搜尋即時顯示相關效果

步驟流程

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

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

step3.
addEventListener監測輸入框的change&keyup。
每次鍵盤輸入觸發displeyMatches()，去比對，把比對結果用map去return組合的HTML的資料。

學習筆記

Regex

[JS30]DAY5 : Flex Panel Image Gallery

[JS30]DAY7 : Array Cardio Day 2

系列文

JS煉金術：Javascript30+聲光玩轉的Drum Pads 共 30 篇

目錄

RSS系列文訂閱系列文

4 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22201 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙