Build a Searchbar Using JavaScript in Five Steps
JavaScript 五個步驟製作搜尋功能
前言
解題
第一步:製作介面
先定義一個 <div>
,並且在裡面放置一個標題、一個搜尋表單、一個用來放置搜尋結果的清單。
第二步:定義資料
先定義好一筆資料,這裡定義一個陣列裡面有許多書籍相關的物件。資料結構可以自行定義,自己定義或撈三方的資料都是 OK 的。
第三步:渲染資料到畫面上
有了資料,我們可以專注在如何把現有資料呈現到畫面上。這裡拆分為兩個函式,一個是用來「生成資料呈現在畫面上的 HTML 」,一個是「渲染結果到畫面上」。我喜歡將程式的功能拆分至最小,這樣可以讓程式碼更容易閱讀、維護與測試。現在畫面上應該就可以看到我們前面定義好的資料了!
第四步:監聽表單
前面定義了 data-bookfinder-form
這個屬性,這裡我們可以使用 querySelector
來選取這個元素,並且監聽 submit
事件。只要當使用者按下送出按鈕時,就可以取得使用者輸入的值(e.target.search.value
)。
第五步:過濾函式
現在重點是前面的 booksFilter 函式要如何過濾資料? 實際上很簡單,我們只需要拿表單提交的值與每一筆現有資料做比對,如果有符合的就回傳該筆資料,寫成代碼就是像下面這樣:
結語
從這個簡單的練習中,用 JavaScript 提供的現有方法達成一件常見的功能。以下是完整的程式碼,可以在 CodePen 上面試試看:
See the Pen Book-Finder by Riceball (
@riecball) on CodePen.