Google Apps Script中MaterializeCSS自动补全功能失效求助

问题根源 #

控制台报错TypeError: Cannot read properties of undefined (reading 'init')的核心原因是Materialize JS脚本加载顺序错误：你的自定义业务脚本（supplierIDLookupFormHTML.js）先于Materialize JS加载，当populateCompanyNames等自动补全初始化函数执行时，Materialize的全局对象M还未被定义，导致无法调用M.autocomplete.init方法。

show_sidebars.js中在body末尾追加div的操作不会影响Materialize的运行，无需关注这部分代码。

修复方案 #

1. 调整脚本加载顺序 #

将Materialize JS脚本移到自定义业务脚本之前加载，确保M对象在自定义代码执行前已初始化：

<!-- 先加载Materialize JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- 再加载自定义脚本 -->
<?!= HtmlService.createHtmlOutputFromFile('sharedJavascriptFunctionsJS').getContent(); ?>
<?!= HtmlService.createHtmlOutputFromFile('supplierIDLookupFormHTML.js').getContent(); ?>

2. 修复函数参数拼写错误 #

检查到两个函数存在参数名与内部引用不一致的问题，会导致数据无法正常传入自动补全组件：

// 修复前
function populateAmazonSellerIDs(amazonSellerIDss){
  let autocomplete =  document.getElementById('amazonSellerID');
  let instances = M.autocomplete.init(autocomplete, {data: amazonSellerIDs});
}

// 修复后
function populateAmazonSellerIDs(amazonSellerIDs){
  let autocomplete =  document.getElementById('amazonSellerID');
  let instances = M.autocomplete.init(autocomplete, {data: amazonSellerIDs});
}

// 同理修复速卖通相关函数
function populateAliexpressSellerIDs(aliexpressSellerIDs){
  let autocomplete =  document.getElementById('aliexpressSellerID');
  let instances = M.autocomplete.init(autocomplete, {data: aliexpressSellerIDs});
}

3. 确保资源完全加载（可选优化） #

将初始化逻辑放到window.load事件中，确保所有外部资源（包括Materialize）加载完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
  window.addEventListener('load', function() {
    preventFormSubmit();
    initialize();
    google.script.run.withSuccessHandler(populateCompanyNames).getSupplierCompanyNames();
    // 其他自动补全初始化调用
  });
});

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