在Google脚本中创建与Google表格中的值列表配合使用的自动完成功能

杰西·席尔瓦(Jesse Silva)

我正在尝试创建自动填充文本字段,如果该国家/地区已经存在于Google工作表中,则该字段将自动填充所填写的国家/地区。目前,当我在“ availabletags”变量中写入所有可能的国家/地区时,我的代码才有效。但我希望它直接从Google工作表中获取值。这是html&脚本:

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
    <div class="ui-widget">
        <label for="text">country</label>
        <input id="text">
    </div>
    <div>
        <button id="btn"> Run it! </button>
    </div>
    <script>
        $(function() {
            var availableTags = [ //should be changed to availableTags = list;
                "belgium",
                "france",
                "greece",
                "spain",
                "italy",
                "the netherlands"
            ];
            $("#text").autocomplete({
                source: availableTags
            });
        });
        document.getElementById("btn").addEventListener("click", doStuff);

        function doStuff() {
            var ucountry = document.getElementById("text").value;
            google.script.run.userClicked(ucountry);
            document.getElementById("text").value = "";
        };
    </script>
</body>
</html>

我在google脚本中编写了以下代码以从google脚本中检索国家/地区,当我查看日志时,来自google工作表的国家/地区列表确实在list变量中。

function doGet() {
    var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
    var list = ws.getRange(1,1,ws.getRange("A1").getDataRegion().getLastRow(),1).getValues(); // contains countries
    Logger.log(list);
    var template = HtmlService.createTemplateFromFile("page");
    template.list = list.map(function(r){return r[0]; });
    var html = template.evaluate();
    return html;
}
function userClicked(country){
    var url = "https://docs.google.com/spreadsheets/d/1IMxZwN3swMTf9EoF_k3iRV7Zc6iwzoWzov5-qC_MSKU/edit#gid=0";
    var ss = SpreadsheetApp.openByUrl(url);
    var ws = ss.getSheetByName("Data");
    ws.appendRow([country]);
}

我想要var availableTags = list; 但是当我这样做时,自动完成功能将停止工作。任何帮助,将不胜感激!

日加诺奇卡

google.script.runSuccessHandler一起使用

这意味着将创建一个附加.gs功能,该附加功能将从客户端onload调用。

样品:

代码

function doGet() {
  var template = HtmlService.createTemplateFromFile("page");
  var html = template.evaluate();
  return html;
}

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);
  return list;
}
function userClicked(country){
  var url = "https://docs.google.com/spreadsheets/d/1IMxZwN3swMTf9EoF_k3iRV7Zc6iwzoWzov5-qC_MSKU/edit#gid=0";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Data");
  ws.appendRow([country]);
}

page.html

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
    <div class="ui-widget">
        <label for="text">country</label>
        <input id="text">
    </div>
    <div>
        <button id="btn"> Run it! </button>
    </div>
    <script>
        google.script.run.withSuccessHandler(tags).getCountry();
        function tags(list) {
          console.log(list);
          var availableTags = list;
          $("#text").autocomplete({
              source: availableTags
            });
        };
        document.getElementById("btn").addEventListener("click", doStuff);

        function doStuff() {
          var ucountry = document.getElementById("text").value;
          google.script.run.userClicked(ucountry);
          document.getElementById("text").value = "";
        };
    </script>
</body>
</html>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用 Google 表格中的图像填充 Jquery 自动完成功能

Google表格未在自动完成功能中显示自定义功能

使用 Google 表格中不同动态表格的值创建列表

如何在本地安装的IDE中为Google Apps脚本启用自动完成功能

使用 Google 表格中的数据在 Google Apps 脚本中自动完成

如何在ExtJS中从google.maps.places.autocomplete创建自动完成功能

如何使用自动完成功能创建脚本?

将Google Places自动完成功能添加到列表项中新生成的输入中

Google Maps API v3:我可以使用ExtJS 4.2在组合框中创建地方自动完成功能吗?

筛选器功能无法与Google表格中的最高日期配合使用

从成对列表中以数组形式获取JSON值(用于自动完成功能)

Google使用Angular JS放置自动完成功能

使用 Apps 脚本在 Google 表格中自动设置列的日期

在emacs中编辑shell脚本时可以使用bash自动完成功能吗?

使用Apps脚本从CSV列表中创建单元内下拉菜单(Google表格数据验证)

Google将JavaScript自动完成功能的API放置在建议中

Google Place自动完成功能会影响输入中的按键按下行为

使黄色的自动完成功能在Google Chrome浏览器中透明

google.maps.places。带有JHipster中的模式的自动完成功能

Google Places自动完成功能在我的模拟器或VMware中不起作用

Google Maps自动完成功能在地址搜索中不包含邮政编码

google-colab自动完成功能中的不同符号是什么意思?

在 Modal 中具有自动完成功能的 Google 地图搜索框

如何使用FormBuilder在Angular中关闭自动完成功能

自动替换Google表格中的文本值

如何在flutter中创建具有自动完成功能的简单Google地图地址搜索并获取经度和纬度?

Google表格查询功能中的可选值

根据输入使用在Google表格中创建动态列表

Flask中的jQuery自动完成功能