Build a book-finder using JavaScript

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.