为什么Google Apps Script项目中MaterializeCSS自动补全功能失效

数据老陈

2026-10-4

问题排查与修复方案

你代码里存在4个核心错误导致自动补全失效，按优先级修复即可：

语法错误：page-js.html 中 DOMContentLoaded 事件监听代码缺闭合右括号，导致整段初始化逻辑根本没有执行
后端函数缺失：前端调用了google.script.run.getWords()，但你的Code.gs中没有定义getWords函数，接口请求失败后不会触发回调函数populateWords
数据未对接：populateWords中目前用的是写死的测试数据，没有用到后端返回的表格内容
数据格式错误：你当前doGet中把表格数据拼接成了<option>标签，这是下拉选择组件的格式，自动补全需要的是纯字符串数组

修正后的`page-js.html`代码

<script>
document.addEventListener('DOMContentLoaded', function() {
  google.script.run.withSuccessHandler(populateWords).getWords();
}); // 补全了这里缺失的闭合右括号

function populateWords(words){
  // 把后端返回的数组转成Materialize要求的对象格式
  const autocompleteData = {};
  words.forEach(item => autocompleteData[item] = null);
  const elems = document.querySelectorAll('.autocomplete');
  const instances = M.Autocomplete.init(elems, {
    data: autocompleteData,
    minLength: 1 // 可选配置，输入1个字符就触发补全
  });
}
</script>

新增到`Code.gs`的代码

// 新增getWords函数给前端调用
function getWords() {
  const ss = SpreadsheetApp.openByUrl("你的表格URL"); // 替换成你自己的表格链接
  const ws = ss.getSheetByName("Const_Sources");
  const list = ws.getRange(1,1,ws.getRange("A1").getDataRegion().getLastRow(),1).getValues();
  // 返回一维字符串数组
  return list.map(r => r[0].toString().trim());
}