为什么autocomplete MaterializeCSS不工作？

Question

我正在尝试使用Google Apps脚本制作Web应用程序。Webapp需要在google sheet内搜索，并让用户从google sheet中选择一个条目。选中该行后，将打开一个新的编辑表单。我不明白为什么自动补全不起作用。删除了除自动完成部分之外的所有内容，因为StackOverflow抱怨问题主要是代码。请帮帮忙。下面是我的代码：

page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <?!= include("page-css"); ?>
  </head>
  <body>
  <div class="container">
    <div class="row">
      <div class="input-field col s9">
        <div class="input-field col s12">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Search for address</label>
        </div>
      </div>
    </div>
  </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <?!= include("page-js"); ?>
  </body>
</html>

page-js.html

<script>
  document.addEventListener('DOMContentLoaded', function() {
    google.script.run.withSuccessHandler(populateWords).getWords();
  }
  function populateWords(words){
    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems, {
       data: {
        "Apple": null,
        "Microsoft": null,
        "Google": null,
        }
     });
  }
</script>

Code.gs

function doGet(e){
    var ss = SpreadsheetApp.openByUrl(url);
    var ws = ss.getSheetByName("Const_Sources")
    var list = ws.getRange(1,1,ws.getRange("A1").getDataRegion().getLastRow(),1).getValues();

    var htmlListArray = list.map(function(r){return '<option>' + r[0] + '</option>'; }).join('');
    Logger.log(htmlListArray)
    var tmp = HtmlService.createTemplateFromFile("page");
    tmp.title = "My title"
    tmp.list = htmlListArray;
    //tmp.list = list.map(function(r){return r[0]; });
    return tmp.evaluate();
}
function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

Answer 1

我花了一些时间才找到，但我做到了！:)你刚刚错过了document.addEventListener(末尾的一个)。所以这是一个工作版本：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    google.script.run.withSuccessHandler(populateWords).getWords();
  }) // added ')' here
  function populateWords(words){
    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems, {
       data: {
        "Apple": null,
        "Microsoft": null,
        "Google": null,
        }
     });
  }
</script>