> For the complete documentation index, see [llms.txt](https://bai-da-shuspersonal-organization.gitbook.io/2025wmg/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bai-da-shuspersonal-organization.gitbook.io/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/quan-yu-xing-gong-neng/shai-xuan-sou-xun-gong-neng/shai-xuan-sou-xun-gong-neng-lie.md).

# 篩選＆搜尋功能列

### 功能簡述

{% hint style="info" %}

* 於特定列表頁面，提供使用者可透過篩選下拉選單與關鍵字搜尋功能，以特定條件篩選特定資料列表內容
* 當出現無符合篩選條件的狀態時，會顯示空值狀態，提示使用者重新調整篩選條件
* 使用單元頁面：
  * [2.5-常見問題](/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/2.0-shi-zhuang-yun/2.6-chang-jian-wen-ti.md)
  * [3.1-最新消息列表](/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/3.0-sai-hui-xiao-xi/3.1-zui-xin-xiao-xi-lie-biao.md)
  * [4.2-運動種類列表](/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/4.0-jing-sai-zi-xun/4.2-yun-dong-zhong-lei-lie-biao.md)
  * [4.4-競賽場館列表](/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/4.0-jing-sai-zi-xun/4.4-jing-sai-chang-guan-lie-biao.md)
  * [4.5-競賽須知-技術手冊頁籤](/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/4.0-jing-sai-zi-xun/4.5-jing-sai-xu-zhi.md#ji-shu-shou-ce-ye-qian)
    {% endhint %}

### 設計規格

<div align="left"><figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FncM2zsfYSiq3izUivzzf%2FFrame%20627197.png?alt=media&amp;token=d93dc724-fd59-4c91-9cae-b41f8e79223e" alt=""><figcaption></figcaption></figure></div>

1. **篩選搜尋方式**
   1. 篩選搜尋功能列，共有3種使用方式：
      1. **只使用【分類篩選】下拉選單**
         1. 使用者選擇特定分類篩選選項，下方列表顯示符合分類的資料列表內容
      2. **只使用【關鍵字搜尋】**
         1. 使用者輸入關鍵字，搜尋特定資料範圍，篩選出符合關鍵字的資料列表內容
      3. **同時使用【分類篩選】下拉選單＆【關鍵字搜尋】**
         1. 使用者可先使用分類篩選再進行關鍵字搜尋，或先進行關鍵字搜尋後，再使用分類篩選，下方列表會依照分類篩選＆關鍵字搜尋條件，顯示符合條件的資料列表內容，若無符合資料，則顯示空值狀態
   2. 使用情境範例，說明如下：
      1. 若全部資料共有5筆，項目如下表\
         ![](https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FttCq5bwRdgMpxFDODzSi%2FFrame%20627258.png?alt=media\&token=7d4ad650-0306-4c1f-b49a-abdaf777c05a)

      2. 預設狀態

         <figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FvqJq2sHx2RV2CBX5Sdx1%2FFrame%20627265.png?alt=media&amp;token=ceab0e68-12b1-43a6-8135-f03e3eb3faac" alt=""><figcaption><p>顯示全部資料</p></figcaption></figure>

      3. 只使用【分類篩選：B】

         <figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FioCRb9dfhQNvhCZm0txP%2FFrame%20627262.png?alt=media&amp;token=3237aed1-a52e-4960-989e-29fd58f5bec8" alt=""><figcaption><p>只顯示符合分類B的資料</p></figcaption></figure>

      4. 先選擇【分類篩選：B】，再進行【關鍵字搜尋：MNO】

         <figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FEl9VOUGfLLU1NCmumKHT%2FFrame%20627266.png?alt=media&amp;token=9d4b3c20-ddf4-4038-be44-c312453cfe8a" alt=""><figcaption><p>顯示符合分類B，且符合MNO關鍵字的資料</p></figcaption></figure>

      5. 先進行【關鍵字搜尋：00】，再選擇【分類篩選：A】

         <figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FPIJe95nbXTJIMBQ5PsXJ%2FFrame%20627267.png?alt=media&amp;token=27e9ee03-e6c5-4e14-a645-50e0aaf6d2a8" alt=""><figcaption><p>顯示符合00關鍵字，且符合分類A的資料</p></figcaption></figure>

      6. 只使用【關鍵字搜尋：00】

         <figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2F7g3hthc7DMSES6OqOPa9%2FFrame%20627268.png?alt=media&amp;token=5751423b-6800-416d-9554-1d02e1722b6c" alt=""><figcaption><p>顯示符合00關鍵字的資料</p></figcaption></figure>

2. **分類篩選列**

   <figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FCv6nZJXGmdIIvpiEyMm2%2FFrame%20627156.png?alt=media&amp;token=405a5824-571d-49d3-ae3f-447e53cf6331" alt=""><figcaption></figcaption></figure>

   1. 點選下拉選單，展開篩選項內容
   2. 點選特定選項，則自動篩選下方列表內容
   3. 分類項目內容，依照各頁面設定

3. **關鍵字搜尋列**

   <figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FM3iFgKR0UHlPypeDkC0G%2FFrame%20627157.png?alt=media&amp;token=82d55883-2628-4c70-9458-4be20be8f8fe" alt=""><figcaption></figcaption></figure>

   1. 使用者輸入關鍵字，點選「鍵盤Enter」或「搜尋ICON」可送出進行查詢動作
   2. 送出查詢後，切換至搜尋結果狀態，點選「X icon」，可清除搜尋結果，並回到預設狀態
   3. 關鍵字搜尋範圍，依照各頁面屬性設定

4. **項目總數**
   1. 依照目前篩選條件，顯示結果數量總數

***

### 修訂紀錄

<table data-full-width="false"><thead><tr><th width="111" data-type="number">序號</th><th>修訂時間</th><th>主要修改內容</th><th>修訂來源</th><th>備註</th></tr></thead><tbody><tr><td>null</td><td></td><td></td><td></td><td></td></tr></tbody></table>