引言

廢話不多就直接開始吧
這次我們需要有一個功能
可以搜尋關鍵字來查詢書名
這樣有買過的書就不會再重複購買囉^____^

切一個喜歡的Search Bar

利用前幾篇教過的方式
來設計這樣的input
touch NavBar.vue
一樣建立一隻新檔案

<template>
  <div class="box-border flex justify-center mb-10 mt-5">
  

    <div class="">
      <input
        type="text"
        id="searchInput"
        placeholder="Search"
        class="w-40 border border-solid border-gray-400 rd-4 px-3 py-2 focus:outline-none"
      />

      <button
        id="submitsearch"
        class="bg-grey-500 rd-4 border border-solid border-white  text-white px-3 py-2 hover:bg-blue-100 focus:outline-none"
      >
    <div class="i-flat-color-icons:search"></div>
      </button>
    </div>
  </div>
</template>

來一點query吧

我們一樣需要在firebase.ts
寫一隻查詢方法

export const searchBookTitle = async (keyword: string) => {
  const collectionRef = collection(db, "bookInfo");
  
  const querySnapshot = await getDocs(collectionRef);

  return querySnapshot.docs.filter((doc) =>
  doc.data().bookTitle.includes(keyword)
);

這樣就能實現查詢書名的功能了