Javascript 如何在GoogleApps脚本中将数组显示到HTML侧栏
这是谷歌应用程序脚本初学者的一个大项目，我有一个数组中的清单（columnValues），需要搜索用户关注的内容（成分）。现在，它只是在寻找精确的匹配，但我将返回并使其更智能（在一些帮助下），虽然现在我很难让我的匹配数组（匹配）显示在我的侧边栏中。我希望最终给用户一个更智能的潜在匹配列表（比如搜索水煮鸡会得到鸡胸肉、鸡翅和水煮鲑鱼）。单击时，我希望将值写入相对于用户焦点的一些单元格（两个单元格） 那么，我应该把它做成一个列表还是一个表格，以便根据我想做的事情在侧边栏中显示它呢？如何修复生成列表的函数？任何关于使搜索更智能的建议都是欢迎的。也欢迎初学者提供任何建议 JSIDLE链接： 谷歌文档链接： 我没有使用jQuery，这个答案使用它，可以使用翻译： 代码.gsJavascript 如何在GoogleApps脚本中将数组显示到HTML侧栏,javascript,html,arrays,google-apps-script,google-sheets,Javascript,Html,Arrays,Google Apps Script,Google Sheets,这是谷歌应用程序脚本初学者的一个大项目，我有一个数组中的清单（columnValues），需要搜索用户关注的内容（成分）。现在，它只是在寻找精确的匹配，但我将返回并使其更智能（在一些帮助下），虽然现在我很难让我的匹配数组（匹配）显示在我的侧边栏中。我希望最终给用户一个更智能的潜在匹配列表（比如搜索水煮鸡会得到鸡胸肉、鸡翅和水煮鲑鱼）。单击时，我希望将值写入相对于用户焦点的一些单元格（两个单元格） 那么，我应该把它做成一个列表还是一个表格，以便根据我想做的事情在侧边栏中显示它呢？如何修复生成列表的
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('Costing Tools')
.addItem('Search menu', 'showSidebar')
.addToUi();
}
function showSidebar() { // Brings up side bar to do inventory search
var html = HtmlService.createHtmlOutputFromFile('page')
.setTitle('Inventory search')
.setWidth(300);
SpreadsheetApp.getUi()
.showSidebar(html);
}
function onSearch() { //When the search button is pressed it loops through the inventory list and finds exact matches eventually I'd like it to be smart
var ui = SpreadsheetApp.getUi();
var ingredient = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getActiveCell().getValue(); //user focus, they click on the item they want to search
Logger.log('i ' + ingredient); //debug
var isheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("INVENTORY");
var columnValues = isheet.getRange("G:G").getValues(); //inventory list
var i = columnValues.length,
array, flag = false,
matches = [];
while (i--) { //walk through columnValues
array = columnValues[i]; //get the ingredient in the li
if (-1 !== array.indexOf(ingredient)) { //-1, string not found
flag = true;
matches.push(array);
}
}
if (!flag) {
ui.alert('No match found.');
} else {
Logger.log('m ' + matches); //debug
function makeUL(arr) { //This function not working
var list = document.createElement('ul'); // Create the list element
Logger.log(list); //debug
for (var i = 0; i < arr.length; i++) { //loop through the array to make the list
var item = document.createElement('li'); // Create the list item
item.appendChild(document.createTextNode(arr[i])); // Set its contents
Logger.log(item); //debug
list.appendChild(item); // Add it to the list
}
Logger.log(list); //debug
return list;
}
document.getElementById('foo').appendChild(makeUL(matches)); //this doesn't work
}
}
page.html
<!DOCTYPE html>
<html>
<head>
<script >
</script>
<base target="_top">
</head>
<body>
<p>Click on the ingredient you want to find in inventory and then click search.</p>
<button onclick="google.script.run.onSearch()">Search</button>
<br>
<br>
<div id="foo">Results</div>
</body>
</html>
单击要在库存中查找的配料，然后单击搜索
搜寻
结果
makeUL（arr）document.getElementById（'foo'）.appendChild（makeUL（matches））
完全是在错误的地方。您试图在google app scriptcode.gs
文件中操作HTML DOM元素，而google app script无法直接操作DOM元素。HTML的文档及其API在google app script中不可用。它在浏览器中可用
那你该怎么办？
您应该将匹配项列表
从谷歌应用程序脚本返回到客户端，并在page.html
中编写makeUL
函数，这是javascript将运行的地方
page.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p>Click on the ingredient you want to find in inventory and then click search.</p>
<button onclick="onSearchClickHandler()">Search</button>
<br>
<br>
<div id="foo">Results</div>
<script>
// search button click handler
function onSearchClickHandler(e){
google.script.run
.withFailureHandler(function(err){
// failure handler callback
console.log(err)
})
.withSuccessHandler(function(arr){
// arr is your match array returned by onSearch
if(arr.length > 0){
var domList = makeUL(arr);
// document object will be available here
document.getElementById('foo').appendChild(domList);
}
})
.onSearch()
}
function makeUL(arr) {
var list = document.createElement('ul'); // Create the list element
console.log(list); //debug
for (var i = 0; i < arr.length; i++) { //loop through the array to make the list
var item = document.createElement('li'); // Create the list item
item.appendChild(document.createTextNode(arr[i])); // Set its contents
console.log(item); //debug
list.appendChild(item); // Add it to the list
}
console.log(list); //debug
return list;
}
</script>
</body>
</html>
function onSearch() { //When the search button is pressed it loops through the inventory list and finds exact matches eventually I'd like it to be smart
var ui = SpreadsheetApp.getUi();
var ingredient = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getActiveCell().getValue(); //user focus, they click on the item they want to search
Logger.log('i ' + ingredient); //debug
var isheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("INVENTORY");
var columnValues = isheet.getRange("G:G").getValues(); //inventory list
var i = columnValues.length,
array, flag = false,
matches = [];
while (i--) { //walk through columnValues
array = columnValues[i]; //get the ingredient in the li
if (-1 !== array.indexOf(ingredient)) { //-1, string not found
flag = true;
matches.push(array);
}
}
if (!flag) {
ui.alert('No match found.');
}
return matches;
}
我自己还没有运行代码，但它应该是这样工作的
“那么，我应该根据我想做的事情，将其作为列表或表格显示在侧边栏中吗？”
完全取决于你的用户体验你想要实现什么；如何设计用户界面
“任何关于让搜索更智能的建议都将受到欢迎。”
从您的用例中，您可以用单独的词分解您的成分，然后进行匹配。如果任何关键字匹配，则将其添加到匹配数组中。i、 你的配料表上有：鸡胸肉、鸡翅。当用户搜索鸡肉时，您可以使用空格字符拆分成分：
ingredientList = ["chicken breast", "chicken wings"];
ingredientWords = ingredientList[0].split(" ");
InCreditWords
将具有[“鸡”、“胸脯”]
并检查此数组是否包含搜索词“鸡”，然后您可以在匹配项中添加该项
如果您想要更高级的匹配方案，可以使用。你可以用。您将发现许多字符串匹配、字符串相似性算法。使用高级算法取决于您的用例和您想要实现的目标
“此外，欢迎向初学者提供任何提示。”
浏览谷歌应用程序脚本教程，了解哪些API可用以及它们的作用。此外，谷歌应用程序脚本在谷歌服务器上运行，因此您在浏览器中获得的所有API和javascript对象，即窗口、文档、控制台、警报等，在谷歌应用程序脚本上都不可用。操作HTMLDOM的代码，应该在客户端即浏览器上
如何将google应用程序脚本中的字符串和对象发送到您的客户端代码，请参见此。您可能还希望在每次搜索之前删除结果，这样您就不会维护以前的结果，例如：results
和onSearchClickHandler（）
adddocument.getElem中的内容