【Google表單教學】如何利用試算表設計網頁關鍵字查詢功能（新版Apps Script編輯器）

前言

今天我們要來分享一個非常實用的Google試算表應用：如何建立一個可以根據部分關鍵字來查詢資料的網頁。

有些網友希望能做出「部分關鍵字查詢」的功能，例如在訂單系統中，只需要輸入客戶名字的一部分，就能找出所有相關的訂單。這個寫法與之前教的完整比對查詢有些差異。剛好最近 Google Apps Script 也改版了新的編輯器介面，所以我們就藉著這個範例，從頭到尾重新教學一次，讓大家都能輕鬆上手！

教學資源

• 前端HTML程式碼 & 後端Apps Script程式碼： 點此前往 (請在新分頁開啟)

• 協作平台(Google Sites)： https://sites.google.com/

---

教學步驟

步驟一：準備你的Google試算表資料

首先，你需要一份整理好的資料。我們這次以「家庭急用電話」為例。

1. 開啟一個新的 Google試算表。

2. 將你的資料整理成像下圖一樣的欄位格式。我們的範例有三個欄位：「單位」、「電話」、「使用說明」。

3. 將這個試算表命名，例如：「家庭急用電話」。

步驟二：撰寫後端程式碼 (Apps Script)

後端程式碼負責處理從網頁傳來的查詢請求，並在試算表中尋找符合的資料後回傳。

1. 在你的試算表中，點擊上方選單的 擴充功能 > Apps Script。

2. 進入 Apps Script 編輯器後，你會看到一個預設的 myFunction 函式，請將它全部刪除。

3. 前往我們提供的教學資源網頁，找到「後端」的程式碼，並將其完整複製。

4. 貼到 Apps Script 編輯器中。

   function doGet(e) {
     //影片說明 https://youtu.be/MQV3k1AOtCU 
     var params = e.parameter;
     var uid = params.uid;
   
     var Sheet = SpreadsheetApp.getActiveSheet();
   
     var LastRow = Sheet.getLastRow();
     var LastColumn = Sheet.getLastColumn();
     var data = [];
     // 取得全部資料
     var listAll = Sheet.getRange(1, 1, LastRow, LastColumn).getValues();
     // 戶標題
     data.push(listAll[0]);
   
     // 找尋資料是否有存在
     for (var i = 1; i < listAll.length; i++) {
       // [2]代表第3欄,陣列從0開始計算,所以您要查詢的欄位位置減1
       if (String(listAll[i][2]).indexOf(uid) != -1 && uid != "") { 
         data.push(listAll[i]);
       }
     }
     // 顯示資料
     Logger.log(data);
     // 回傳json資料
     return ContentService.createTextOutput(JSON.stringify(data))
       .setMimeType(ContentService.MimeType.JSON);
   }

5. 修改查詢欄位（最重要的一步！）
   在程式碼的第21行，你會看到 listAll[i][2]。這個 [2] 代表你要在哪一欄進行關鍵字搜尋。

   • 陣列是從 0 開始計算的，所以 [0] 代表A欄、[1] 代表B欄、[2] 代表C欄。

   • 我們的範例是要在「使用說明」（C欄）中搜尋，所以使用 [2]。

   • 如果你想在「單位」（A欄）搜尋，就改成 listAll[i][0]。

6. 點擊上方的「儲存專案」圖示。

步驟三：部署為網路應用程式

寫好的程式碼需要「部署」後才能變成一個可供網頁呼叫的服務。

1. 點擊右上角的藍色按鈕「部署」，選擇「新增部署作業」。

2. 在「選取類型」旁邊點擊齒輪圖示，選擇「網頁應用程式」。

3. 在「說明」欄位輸入版本描述，例如：「1.0 初版」。

4. 設定存取權（最重要的一步！）
   將「誰可以存取」的選項從「只有我自己」改為「任何人」。這一步非常關鍵，否則外部網頁將無法呼叫這個服務。

5. 點擊「部署」。

6. 首次部署會需要授權。點擊「授予存取權」，選擇你的Google帳戶，接著在「不安全」的畫面中點擊「進階」，然後選擇「前往『專案名稱』(不安全)」，最後點擊「允許」。

7. 授權成功後，你會得到一個「網頁應用程式的網址」，請務必將它複製下來，我們下一步會用到。

步驟四：建立前端查詢網頁 (Google Sites)

現在我們要建立一個使用者可以操作的查詢介面。

1. 前往 Google協作平台 (Google Sites)。

2. 建立一個新的空白網站，或在你現有的網站中新增一個頁面。

3. 在右側的工具列中，選擇「插入」>「內嵌」。

4. 在彈出的視窗中，選擇「嵌入程式碼」。

5. 前往我們提供的教學資源網頁，找到「前端」的HTML程式碼，並將其完整複製。

6. 貼到Google Sites的程式碼嵌入框中。

7. 修改API網址（最重要的一步！）
   在剛剛貼上的程式碼中，找到 var url = 'https://xxxxx'; 這一行。
   將 https://xxxxx 替換成你在步驟三取得的「網頁應用程式網址」。

8. 點擊「下一步」，然後「插入」。你可以拖曳調整嵌入區塊的大小。

步驟五：發佈網站並測試

1. 點擊Google Sites右上角的「發佈」。

2. 為你的網站取一個網址名稱，然後點擊「發佈」。

3. 發佈成功後，點擊「查看」已發佈的網站。

4. 現在你就可以在輸入框中輸入關鍵字（例如：長途），然後點擊「查詢」，下方就會顯示符合條件的資料了！

重點整理與常見問題

1. 後端程式碼：記得修改 listAll[i][?] 的數字，? 代表你要搜尋的欄位索引值（A欄是0，B欄是1，以此類推）。

2. 部署權限：部署時，「誰可以存取」一定要設為「任何人」。

3. 前端程式碼：一定要將 var url 的值換成你自己的 網頁應用程式網址。

4. 修改後沒反應？：如果你修改了後端的 Apps Script 程式碼，你必須重新「新增部署作業」！每次新增部署都會產生一個新的網址，你需要將這個新網址再次更新到前端的程式碼中，修改才會生效。這是最多人卡關的地方！

希望今天的教學對你有幫助，讓你也能輕鬆打造自己的網頁查詢系統！