【发布时间】：2020-01-22 15:50:18
【问题描述】：
我正在尝试创建一个简单的网络应用程序，将国家/地区添加到谷歌表格中。并使用物化自动完成来帮助用户（它只是自动完成国家，没有附加图像）。我看到了几个物化自动完成的例子，但总是带有预定义的自动完成列表。这是我使用的html：
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">work_outline</i>
<input id="autocomplete-input" type="text" class="autocomplete">
<label for="autocomplete-input">Country</label>
</div>
</div>
</div>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light amber accent-4" id="add_btn">Add country
<i class="material-icons right">send</i>
</button>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
google.script.run.withSuccessHandler(tags).getCountry();
function tags(data) {
var availableTags = data;
$('input.autocomplete').autocomplete({
data: availableTags
});
};
document.getElementById("add_btn").addEventListener("click", doStuff);
function doStuff() {
var ucountry = document.getElementById("autocomplete-input").value;
google.script.run.userClicked(ucountry);
document.getElementById("autocomplete-input").value = "";
};
</script>
</body>
</html>
这是我在谷歌脚本中的代码，函数 getCountry 有效，并返回国家列表。但是我没有成功将它们添加到具体化自动完成功能中。
function doGet() {
var template = HtmlService.createTemplateFromFile("page");
var html = template.evaluate();
return html;
}
function userClicked(country){
var url = "https://docs.google.com/spreadsheets/d/1_GtmVrdD1Es6zQZna_Mv-Rc3JkIu66-q_knQ8aqcUIc/edit#gid=0";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Data");
ws.appendRow([country]);
}
function getCountry(){
var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
var list = ws.getRange(1,1,ws.getRange("A1").getDataRegion().getLastRow(),1).getValues(); // contains countries
list = list.map(function(r){return r[0]; });
Logger.log(list);
var data = "{";
for (var i = 0; i < list.length; i++) {
data = data + "'" + list[i] + "': null,";
}
data = data.slice(0, -1) + "}";
Logger.log(data);
return data;
}
这是https://materializecss.com/autocomplete.html的信息
// Or with jQuery
$(document).ready(function(){
$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
});
});
【问题讨论】：
-
请允许访问您的工作表
-
抱歉回复晚了，我有点病了。但是这里有链接，docs.google.com/spreadsheets/d/…
-
您应该首先运行 do get 功能，然后将其部署为 Web 应用程序，然后它应该可以工作。如果它不起作用，那是由于所有者权限，那么您应该只复制工作表，然后运行 do get 并部署为 Web 应用程序。感谢您的努力！
-
这是指向网络应用程序的链接，script.google.com/macros/s/…
标签： javascript google-apps-script google-sheets autocomplete materialize