如何通过App Script实现Google Sheets自定义菜单搜索栏自动补全

首先明确核心平台限制：Google Sheets 原生自定义菜单（通过SpreadsheetApp.getUi().createMenu()创建的顶部菜单）仅支持添加纯文本菜单项、子菜单、分隔线，没有提供嵌入输入框、搜索栏这类交互控件的API，这也是查阅官方文档和公开资料找不到直接在菜单内插入搜索栏方案的根本原因。

要实现带自动补全的搜索功能，可行的落地方案是：在自定义菜单添加功能入口，点击入口后唤起侧边栏/模态对话框，在对话框内实现带自动补全的搜索栏，交互效果和预期的输入联想完全一致。

1. 编写菜单加载与入口逻辑 #

打开脚本编辑器，写入以下代码，实现打开表格时自动加载自定义菜单，点击菜单项唤起搜索侧边栏：

// 表格打开时自动触发，创建自定义菜单
function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('自定义工具')
    .addItem('打开搜索', 'openSearchSidebar')
    .addToUi();
}

// 唤起搜索侧边栏
function openSearchSidebar() {
  const htmlOutput = HtmlService.createHtmlOutputFromFile('searchComponent')
    .setTitle('快速搜索')
    .setWidth(280);
  SpreadsheetApp.getUi().showSidebar(htmlOutput);
}

// 返回用于自动补全的自定义数据源，可根据需求修改
function getSearchSource() {
  return ["potato", "apple", "pear", "pineapple", "banana", "peach", "blueberry"];
}

// 可选：写入选中搜索项后的业务逻辑，比如填充单元格、定位数据行等
function handleSearchSelect(selectedValue) {
  const activeCell = SpreadsheetApp.getActiveRange();
  activeCell.setValue(selectedValue);
}

2. 编写搜索栏前端组件 #

在脚本编辑器新建HTML文件，命名为searchComponent，写入以下代码实现输入监听、自动补全匹配、选项选中交互：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <base target="_top">
  <style>
    .wrapper {
      padding: 10px;
      box-sizing: border-box;
      width: 100%;
    }
    #searchInput {
      width: 100%;
      padding: 8px;
      border: 1px solid #d0d0d0;
      border-radius: 4px;
      font-size: 14px;
      box-sizing: border-box;
    }
    .suggest-list {
      margin: 4px 0 0 0;
      padding: 0;
      list-style: none;
      border: 1px solid #d0d0d0;
      border-radius: 4px;
      max-height: 220px;
      overflow-y: auto;
    }
    .suggest-item {
      padding: 8px;
      cursor: pointer;
      font-size: 14px;
    }
    .suggest-item:hover {
      background: #f0f0f0;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <input type="text" id="searchInput" placeholder="输入关键词...">
    <ul class="suggest-list" id="suggestList"></ul>
  </div>
  <script>
    let sourceData = [];
    // 页面加载时拉取匹配数据源
    google.script.run
      .withSuccessHandler(res => sourceData = res)
      .getSearchSource();

    const inputEl = document.getElementById('searchInput');
    const listEl = document.getElementById('suggestList');

    // 监听输入事件，实时匹配
    inputEl.addEventListener('input', function() {
      const keyword = this.value.trim().toLowerCase();
      listEl.innerHTML = '';
      if (!keyword) return;

      // 匹配规则：筛选以输入字符开头的项，可按需修改为includes()实现任意位置匹配
      const matched = sourceData.filter(item => item.toLowerCase().startsWith(keyword));
      matched.forEach(item => {
        const itemEl = document.createElement('li');
        itemEl.className = 'suggest-item';
        itemEl.textContent = item;
        // 点击选项触发后续逻辑
        itemEl.addEventListener('click', () => {
          inputEl.value = item;
          listEl.innerHTML = '';
          // 调用后端逻辑处理选中值
          google.script.run.handleSearchSelect(item);
        });
        listEl.appendChild(itemEl);
      })
    });

    // 点击输入框外区域关闭联想列表
    document.addEventListener('click', e => {
      if (e.target !== inputEl) listEl.innerHTML = '';
    })
  </script>
</body>
</html>

• 数据源修改：直接调整getSearchSource函数的返回值即可，也可以替换为读取表格指定区域的值作为匹配源
• 匹配规则修改：将筛选逻辑里的startsWith替换为includes，即可支持关键词在任意位置的模糊匹配，输入字符“p”时会自动联想出“potato”等符合规则的选项
• 交互形式修改：如果不想用侧边栏，可以将showSidebar替换为showModalDialog，以居中弹窗的形式展示搜索栏，前端逻辑无需改动
• 选中后逻辑修改：在handleSearchSelect函数里编写自己的业务逻辑，比如定位到对应数据行、批量处理数据等，默认逻辑是将选中值填入当前激活单元格。

内容的提问来源于stack exchange，提问作者HuguesG