Build a Searchbar Using JavaScript in Five Steps

JavaScript 五個步驟製作搜尋功能

前言

解題

第一步:製作介面

先定義一個 <div>,並且在裡面放置一個標題、一個搜尋表單、一個用來放置搜尋結果的清單。

<div>
<!-- 標題 -->
<h1>Book Finder</h1>
<!-- 搜尋表單 -->
<form data-bookfinder-form>
<input name="search" type="text" placeholder="請輸入搜尋內容……" />
<button type="submit">送出</button>
</form>
<!-- 搜尋結果 -->
<ul data-books></ul>
</div>

第二步:定義資料

先定義好一筆資料,這裡定義一個陣列裡面有許多書籍相關的物件。資料結構可以自行定義,自己定義或撈三方的資料都是 OK 的。

const books = [
{
name: '雙城記',
author: '狄更斯',
},
{
name: '童軍警探',
author: '貝登堡',
},
{
name: '魔戒',
author: '約翰',
},
];

第三步:渲染資料到畫面上

有了資料,我們可以專注在如何把現有資料呈現到畫面上。這裡拆分為兩個函式,一個是用來「生成資料呈現在畫面上的 HTML 」,一個是「渲染結果到畫面上」。我喜歡將程式的功能拆分至最小,這樣可以讓程式碼更容易閱讀、維護與測試。現在畫面上應該就可以看到我們前面定義好的資料了!

function renderBooks(targetHTML) {
const bookList = document.querySelector('[data-books]');
bookList.innerHTML = targetHTML;
}
function generateBookHTML(targetBooks) {
return targetBooks
.map((book) => {
return `<li class="bookList__item">${book.name} - <span class="bookList__author">${book.author}</span></li>`;
})
.join('');
}

第四步:監聽表單

前面定義了 data-bookfinder-form 這個屬性,這裡我們可以使用 querySelector 來選取這個元素,並且監聽 submit 事件。只要當使用者按下送出按鈕時,就可以取得使用者輸入的值(e.target.search.value)。

document.querySelector('[data-bookfinder-form]').addEventListener('submit', (e) => {
e.preventDefault();
renderBooks(generateBookHTML(booksFilter(e.target.search.value)));
});

第五步:過濾函式

現在重點是前面的 booksFilter 函式要如何過濾資料? 實際上很簡單,我們只需要拿表單提交的值與每一筆現有資料做比對,如果有符合的就回傳該筆資料,寫成代碼就是像下面這樣:

function booksFilter(targetBook, allBooks = books) {
return allBooks.filter((book) => {
return book.name.includes(targetBook);
});
}

結語

從這個簡單的練習中,用 JavaScript 提供的現有方法達成一件常見的功能。以下是完整的程式碼,可以在 CodePen 上面試試看:

See the Pen Book-Finder by Riceball ( @riecball) on CodePen.