Day20 - Astro Series: Search Functionality

Astro 系列文第二十日：實作搜尋功能

@ Astro

一個漂亮的漸層背景上面有一句標題：「實作搜尋功能」

前言

前面透過建立靜態端點實作了自己的 RSS Feed 算是一個簡單的練習起步，這次更進一步透過建立整個集合的資料來完成「集合文章搜尋功能」。

定義問題

隨著文章愈來愈多會需要一個查詢文章的功能，透過用戶輸入文章相關的訊息，比對文章資訊（標題、文章短描述）並顯示出最相關的文章。透過以上描述統整出會需要以下幾個要點：

  1. 用戶可以輸入查詢的介面
  2. 獲取當前集合資料的方式
  3. 可以模糊比對輸入內容與當前所有資料的系統
  4. 顯示查詢結果的介面

實作

統整下來，以上的問題會需要較為頻繁的操縱到 DOM 且有一定的複雜程度，因此會引入框架來協助處理資料與畫面更新的問題，避免糾結在一些底層的 DOM 操作上面，這裡我使用 Preact （類似輕量化的 React），可以選擇自己習慣的框架即可。

第一步：製作輸入查詢的介面

創建一個 jsx 元件，製作一個 <input>，只在用戶第一次 Focus 的時候抓取要比對的資料，並且切換 isLoading 的狀態。

function getPosts() {
  setIsLoading(true);
  return fetch('/search.json')
    .then((res) => {
      if (!res.ok) {
        throw new Error('Network response was not ok');
      }
      return res.json();
    })
    .catch((err) => console.error(err))
    .finally(setIsLoading(false));
}


async function handleInputFocus() {
  setIsSearching(true);
  if (!posts.length) {
    setPosts(await getPosts());
  }
}

並且在 Blur 的時候，如果目標是在搜尋元件之外就將 isSearching 的狀態切換為否。

function handleInputBlur(e) {
  const { currentTarget } = e;


  // 給瀏覽器時間去 Focus 下一個元素
  requestAnimationFrame(() => {
    if (!currentTarget.contains(document.activeElement)) {
      setIsSearching(false);
    }
  });
}

由於在手機尺寸並不會顯示這個區塊的功能，因此可以設定只有在裝置尺寸 1024px 以上才載入相關的客戶端 JavaScript ，達成「有用到才載入」，節省不必要的浪費。

<Search client:media="(min-width: 1024px)" />

第二步：製作資料端點與索取資料

由於前面 getPosts 會期望網站的根部有 search.json 這樣一個檔案，因此需要製作一個端點並產生一個要搜尋資料的 JSON 檔，這裡以我的部落格為範例，內容包含了文章的：連結、標題、繁中標題、短介紹、主題色。

search.json.ts
import { getCollection } from 'astro:content';


async function getPosts() {
  const avaliablePosts = await getCollection('post', (post) => (import.meta.env.PROD ? !post.data.isDraft : true));
  return avaliablePosts.map((post) => ({
    slug: post.slug,
    title: post.data.title,
    titleTC: post.data.titleTC,
    excerpt: post.data.excerpt,
    themeColor: post.data.themeColor,
  }));
}


export async function GET() {
  return new Response(JSON.stringify(await getPosts()), {
    status: 200,
    headers: {
      'content-type': 'application/json',
    },
  });
}

第三步：模糊搜尋比對結果

每當用戶輸入時如果 fuse 實例並沒有被創造過，就創造一次到 fuseInstance 當中，並且透過給 fuse 實例的搜尋方法傳入「目前查詢的詞彙」可以得到模糊比對出來最貼近用戶搜尋的文章。

let fuseInstance;
function handleInputChange(e) {
  if (!fuseInstance) {
    fuseInstance = new Fuse(posts, {
      includeScore: true,
      shouldSort: true,
      threshold: 0.5,
      keys: [
        {
          name: 'titleTC',
          weight: 1,
        },
        {
          name: 'title',
          weight: 1,
        },
      ],
    });
  }


  setResults(fuseInstance.search(e.target.value));
}

第四步：將結果展示到畫面當中

基本上你只需要把 results 這筆資料展示到畫面上即可。

總結

由於我有使用到 Preact🔗 與 Fuse.js🔗，但還是希望這篇文章能夠盡量的著重在 Astro 本身，因此有些描述會省略掉，可以了解其中大概念即可。

延伸閱讀