MaterializeCSS onAutocomplete 不触发 javascript 回调函数答案

【问题标题】：MaterializeCSS onAutocomplete not triggering javascript callback functionMaterializeCSS onAutocomplete 不触发 javascript 回调函数
【发布时间】：2021-12-18 08:52:12
【问题描述】：

我正在使用 Materialize CSS 创建一个链接到我们公司的 Google Drive 的 Google Web App，用于一些基本的文档流程。我正在尝试创建一个自动完成的文本字段，当用户开始键入时，它填充选项以及选择选项时，它会根据所选客户端触发OnaUtocomplete回调和自动填充部分以下字段。让字段自动完成没问题，但我无法触发 onAutocomplete 回调。

<!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("pageCSS"); ?>
  </head>
  <body>
    <div class="row input-field">
        <input  class="autocomplete"type="text" id="autocompleteField"/>
        <label for="infoModalName">Client Name</label>
    </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> 
  </script>
  <?!= include("pageScripts"); ?>
  </body>
</html>

<script>
function populateWords(words){
        
    //console.log(words)

    var autoComplete = document.getElementById("autocompleteField");
    M.Autocomplete.init(autoComplete, {data: words}, {onAutocomplete: function() 
       {console.log("Hello")}});

}
</script>

现在，我只是想让回调函数输出任何内容，而不是写入其他字段。很多在线文档都使用了 JQuery 设置，但这是我需要开始工作的最后一件事，而且到目前为止我还没有使用任何 JQuery，所以如果可能的话，我宁愿坚持使用 Javascript 解决方案。

【问题讨论】：

请问你的HTML和populateWords的功能有什么关系？
是的，当然。我的DOMContentLoaded 事件侦听器调用google.script.run.withSuccessHandler(populateData).getAutoFillData()，它从我们的谷歌电子表格中提取我们的客户名称并将其返回给populateWords() 自动完成部分工作正常，只是不是回调。
感谢您的回复。我不得不为我糟糕的英语水平道歉。不幸的是，我无法理解function populateWords(words){,,,} 和google.script.run.withSuccessHandler(populateData).getAutoFillData() 的populateData 之间的关系。函数populateData 在哪里？另外，能否提供words的样本值？
虽然不幸的是，根据您的问题，我无法知道您脚本中words 的值，但我提出了一个修改后的脚本，使用words 的示例值作为答案。你能确认一下吗？如果这是您问题的直接解决方案，我深表歉意。
抱歉，populateWords() 是我的脚本之一。我编辑了我的问题以包含<script>。它应该是google.script.run.withSuccessHandler(populateWords).getAutoFillData() 而不是populateData，因为我发布了这个问题，但我没有意识到，我正在做一些改变。单词格式如下：words = {CBX Global=false, Client=false, RPM Partners=false, I. L. Long Construction Co., Inc.=false}

标签： javascript google-apps-script materialize

【解决方案1】：

似乎M.Autocomplete.init 的参数类似于M.Autocomplete.init(elems, options)。 Ref 而且，words 的值似乎必须是一个对象。当这些反映在你的脚本中时，它变成如下。

修改脚本：

在本次修改中，请将populateWords修改如下。

function populateWords(words){
  words = {key: "value"};  // This is a sample value for testing this modification.
  var autoComplete = document.getElementById("autocompleteField");
  M.Autocomplete.init(autoComplete, {data: words, onAutocomplete: function() {console.log("Hello")}});
}

在此修改中，当k放入文本输入时，运行自动完成，选择key 987654330 @ @ / li>

注意：

很遗憾，根据您的问题，我无法知道您脚本中words 的值。所以我使用了一个样本值。请根据您的实际情况进行修改。

参考：

Autocomplete

【讨论】：

做到了！非常感谢，我已经为此苦苦挣扎了三天。我知道这一定很简单。再次感谢！！
@Thedornman 感谢您的回复。我很高兴你的问题得到了解决。也谢谢你。