MaterializeCSS onAutocomplete 不触发 javascript 回调函数
Posted
技术标签:
【中文标题】MaterializeCSS onAutocomplete 不触发 javascript 回调函数【英文标题】：MaterializeCSS onAutocomplete not triggering javascript callback function 【发布时间】：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
【参考方案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 感谢您的回复。我很高兴你的问题得到了解决。也谢谢你。以上是关于MaterializeCSS onAutocomplete 不触发 javascript 回调函数的主要内容，如果未能解决你的问题，请参考以下文章