Google Sheet 資料查詢工具：即時搜尋介面

用途

把一張現有的 Google Sheet 快速做成帶搜尋框和篩選功能的查詢介面，讓非技術同仁也能自助查資料，不用每次都問你。

何時用

• 適合：已有一張 Google Sheet（價目表、產品目錄、客戶通訊錄、庫存清單）想快速做成可搜尋的網頁工具時。
• 不要用：Sheet 有寫入需求（這道 prompt 做的是唯讀查詢介面）；或是資料源是資料庫、API 而非 Google Sheet（請用 API 整合版）。

Prompt

我有一張 Google Sheet，想做成線上查詢工具。

Sheet 資訊：
- 分享連結：{{Google Sheet 公開分享連結}}
- 分頁名稱：{{要用的分頁名稱，例：產品目錄}}
- 欄位清單：{{所有欄位名稱，例：品項編號/品名/規格/單位/定價/庫存數量/適用分類}}

工具名稱：{{工具名稱，例：產品目錄查詢系統}}

功能需求：
- 搜尋框：輸入關鍵字即時過濾（不需按搜尋按鈕）
- 分類下拉：依「{{篩選欄位，例：適用分類}}」篩選
- 結果表格：顯示 {{要顯示的欄位，例：品名/規格/定價/庫存數量}}
- 每次打開重新讀取最新 Sheet 資料（不快取舊資料）

介面：全繁體中文，版面簡潔，手機也能操作
輸出：完整單一 HTML 檔案

範例 / 變體

• 填好變數：分享連結填入你的 Sheet 連結（確認已設定「知道連結的人可以查看」）、分頁名稱填 產品目錄、欄位清單填 品項編號/品名/規格/定價/庫存、篩選欄位填 適用分類。
• 變體（多欄搜尋）：功能需求加「搜尋框同時搜品名和規格欄位」，讓搜尋更全面。
• 變體（加匯出按鈕）：功能需求加「加一個「匯出篩選結果 CSV」按鈕」，讓業務同仁可以把查詢結果帶走。

🎯 範例輸出（實測）

在 Gemini 跑這句、工具名稱填「產品目錄查詢系統」、分頁名稱填「產品目錄」、欄位清單填「品項編號/品名/規格/定價/庫存數量/適用分類」、篩選欄位填「適用分類」的結果：

點開看 AI 實際輸出

Gemini 輸出完整單一 HTML 檔案，核心邏輯如下：

Google Sheets JSON API 呼叫方式：

const SHEET_ID = "YOUR_SHEET_ID_HERE";  // 從分享連結取得
const SHEET_NAME = encodeURIComponent("產品目錄");
const API_URL = `https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:json&sheet=${SHEET_NAME}`;

async function loadSheetData() {
  const res = await fetch(API_URL);
  const text = await res.text();
  // Google Sheets 回應是 JSONP 格式，需要去掉前後的包裝
  const json = JSON.parse(text.substring(47, text.length - 2));
  return parseRows(json.table);
}

即時搜尋邏輯（不需按按鈕）：

document.getElementById('search-input').addEventListener('input', function() {
  const keyword = this.value.toLowerCase();
  const category = document.getElementById('category-filter').value;
  const filtered = allData.filter(row => {
    const matchKeyword = !keyword ||
      row['品名'].toLowerCase().includes(keyword) ||
      row['規格'].toLowerCase().includes(keyword);
    const matchCategory = !category || row['適用分類'] === category;
    return matchKeyword && matchCategory;
  });
  renderTable(filtered);
});

介面結構：

• 搜尋框（即時過濾）＋分類下拉選單（同行）
• 結果表格：品名｜規格｜定價｜庫存數量
• 庫存為 0 的列自動標紅色警示
• 手機版自動隱藏「規格」欄，保留最關鍵欄位

資料讀取失敗時的錯誤提示： 「無法載入資料，請確認 Google Sheet 已設定為「知道連結的人可以查看」」

💡 實測心得：Google Sheets JSON API 回應格式是 JSONP 不是純 JSON，Gemini 生成的解析程式碼要留意 substring(47, ...) 這個數字——不同版本的 Google API 包裝前綴字元數可能不同，實際測試時要確認一下截取的 JSON 是否正確。

延伸

簡單來說，這道 prompt 的核心是讓 Sheet 當作唯讀資料庫，HTML 工具當作查詢介面，兩者用 Google Sheets JSON API 串在一起。限制是 Sheet 必須設定為公開分享，且沒有欄寫入功能。如果查詢工具做好了想加 AI 自動分析（例：按一個按鈕讓 AI 摘要庫存異常），接著用「職場小工具加 AI 功能」。