Javascript 将Google应用程序脚本数组应用于HTML表单自动完成数据列表
我已经成功地创建了一个GoogleScripts函数，它从GoogleSheet列中创建一个数组，过滤掉所有空格。但是，我不确定如何将此变量传递到HTML表单，以便创建自动完成选项列表 用户将向电子表格添加内容，因此列表必须是动态的，才能随电子表格的增长而增长。表单用户应能够使用“自动完成”键入，或从电子表格数组中的项目列表中滚动，这些项目将随时间而变化 编辑：很抱歉没有显示足够的代码，造成任何混乱。基本上，我试图让readData中的数组在html中变成这样Javascript 将Google应用程序脚本数组应用于HTML表单自动完成数据列表,javascript,html,arrays,forms,google-apps-script,Javascript,Html,Arrays,Forms,Google Apps Script,我已经成功地创建了一个GoogleScripts函数，它从GoogleSheet列中创建一个数组，过滤掉所有空格。但是，我不确定如何将此变量传递到HTML表单，以便创建自动完成选项列表 用户将向电子表格添加内容，因此列表必须是动态的，才能随电子表格的增长而增长。表单用户应能够使用“自动完成”键入，或从电子表格数组中的项目列表中滚动，这些项目将随时间而变化 编辑：很抱歉没有显示足够的代码，造成任何混乱。基本上，我试图让readData中的数组在html中变成这样 <datalist id=&
<datalist id="datalist">
<option value="Plain#1">
<option value="Plain#2">
<option value="Plain#3">
<option value="Plain#4">
<option value="Plain#5">
<option value="Plain#6">
</datalist>
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
::placeholder{
color: #D3D3D3 !important;
}
</style>
<?!= include('JavaScript');
var options = readData();
?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<p class="h4 mb-4 text-center">Paper Bag Inventory</p>
<div class="form-row">
<div class="form-group col-md-6">
<label for="item1">Item Code</label>
<input type="text" class="form-control" id="item1" name="item1" placeholder="Item #1" list="datalist" required>
</div>
<div class="form-group col-md-6">
<label for="amount1">Amount</label>
<input type="text" class="form-control" id="amount1" name="amount1" placeholder="Amount" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input type="text" class="form-control" id="item2" name="item2" placeholder="Item #2" list="datalist">
</div>
<div class="form-group col-md-6">
<input type="text" class="form-control" id="amount2" name="amount2" placeholder="Amount">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input type="text" class="form-control" id="item3" name="item3" placeholder="Item #3" list="datalist">
</div>
<div class="form-group col-md-6">
<input type="text" class="form-control" id="amount3" name="amount3" placeholder="Amount">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input type="text" class="form-control" id="item4" name="item4" placeholder="Item #4" list="datalist">
</div>
<div class="form-group col-md-6">
<input type="text" class="form-control" id="amount4" name="amount4" placeholder="Amount">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input type="text" class="form-control" id="item5" name="item5" placeholder="Item #5" list="datalist">
</div>
<div class="form-group col-md-6">
<input type="text" class="form-control" id="amount5" name="amount5" placeholder="Amount">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input type="text" class="form-control" id="item6" name="item6" placeholder="Item #6" list="datalist">
</div>
<div class="form-group col-md-6">
<input type="text" class="form-control" id="amount6" name="amount6" placeholder="Amount">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input type="text" class="form-control" id="item7" name="item7" placeholder="Item #7" list="datalist">
</div>
<div class="form-group col-md-6">
<input type="text" class="form-control" id="amount7" name="amount7" placeholder="Amount">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input type="text" class="form-control" id="item8" name="item8" placeholder="Item #8" list="datalist">
</div>
<div class="form-group col-md-6">
<input type="text" class="form-control" id="amount8" name="amount8" placeholder="Amount">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input type="text" class="form-control" id="item9" name="item9" placeholder="Item #9" list="datalist">
</div>
<div class="form-group col-md-6">
<input type="text" class="form-control" id="amount9" name="amount9" placeholder="Amount">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input type="text" class="form-control" id="item10" name="item10" placeholder="Item #10" list="datalist">
</div>
<div class="form-group col-md-6">
<input type="text" class="form-control" id="amount10" name="amount10" placeholder="Amount">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input type="text" class="form-control" id="client" name="client" placeholder="Client Name" required>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<div id="output"></div>
</div>
</div>
</div>
</body>
</html>
<datalist id="datalist">
<script type="text/javascript">
// my attempt to call gs function
var mylist = readData()
var options = '';
for(var i = 0; i < mylist.length; i++)
options += '<option value="'+mylist[i]+'" />';
document.getElementById('datalist').innerHTML = options;
</script>
</datalist>
我想提出以下修改 修改点： 在您的情况下，我建议您从GoogleApps脚本的readData返回一维数组。 从你的HTML和Javascript中，我认为你的HTML文件被放到了googleapps脚本项目中。在这种情况下，我建议使用模板化的HTML将电子表格中的值放入。 当上述各点反映到脚本中时，它将变成如下所示
function doGet() {
var html = HtmlService.createTemplateFromFile("index");
html.data = readData();
return html.evaluate();
}
function doGet() {
var html = HtmlService.createTemplateFromFile("index");
html.data = readData();
return html.evaluate();
}
var html = HtmlService.createTemplateFromFile("index");
html.data = readData();
SpreadsheetApp.getUi().showSidebar(html.evaluate());
var html = HtmlService.createTemplateFromFile("index");
html.data = readData();
SpreadsheetApp.getUi().showModalDialog(html.evaluate(), "sample");
var html = HtmlService.createTemplateFromFile("index");
html.data = readData();
SpreadsheetApp.getUi().showSidebar(html.evaluate());
var html = HtmlService.createTemplateFromFile("index");
html.data = readData();
SpreadsheetApp.getUi().showModalDialog(html.evaluate(), "sample");
我想提出以下修改 修改点： 在您的情况下，我建议您从GoogleApps脚本的readData返回一维数组。 从你的HTML和Javascript中，我认为你的HTML文件被放到了googleapps脚本项目中。在这种情况下，我建议使用模板化的HTML将电子表格中的值放入。 当上述各点反映到脚本中时，它将变成如下所示
function doGet() {
var html = HtmlService.createTemplateFromFile("index");
html.data = readData();
return html.evaluate();
}
function doGet() {
var html = HtmlService.createTemplateFromFile("index");
html.data = readData();
return html.evaluate();
}
var html = HtmlService.createTemplateFromFile("index");
html.data = readData();
SpreadsheetApp.getUi().showSidebar(html.evaluate());
var html = HtmlService.createTemplateFromFile("index");
html.data = readData();
SpreadsheetApp.getUi().showModalDialog(html.evaluate(), "sample");
var html = HtmlService.createTemplateFromFile("index");
html.data = readData();
SpreadsheetApp.getUi().showSidebar(html.evaluate());
var html = HtmlService.createTemplateFromFile("index");
html.data = readData();
SpreadsheetApp.getUi().showModalDialog(html.evaluate(), "sample");
你想要一个像这样的自动完成输入表单吗 函数自动完成{ /*autocomplete函数接受两个参数， 文本字段元素和可能的自动完成值数组：*/ 无功电流聚焦； /*当有人在文本字段中写入时执行函数：*/ inp.addEventListenerinput，函数E{ var a，b，i，val=该值； /*关闭所有已打开的自动完成值列表*/ 关闭列表； if！val{return false；} currentFocus=-1； /*创建一个DIV元素，该元素将包含以下项值：*/ a=document.createElementDIV； a、 setAttributeid，this.id+自动完成列表； a、 setAttributeclass，自动完成项目； /*将DIV元素作为自动完成容器的子元素追加：*/ this.parentNode.appendChilda； /*对于数组中的每个项*/ 对于i=0；i