Javascript 向materialize autocomplete函数添加一个Google工作表值列表_Javascript_Google Apps Script_Google Sheets_Autocomplete_Materialize

Javascript 向materialize autocomplete函数添加一个Google工作表值列表

javascript google-apps-script google-sheets autocomplete

Javascript 向materialize autocomplete函数添加一个Google工作表值列表,javascript,google-apps-script,google-sheets,autocomplete,materialize,Javascript,Google Apps Script,Google Sheets,Autocomplete,Materialize,我正在尝试创建一个简单的web应用程序，将国家添加到google表单中。并使用materialize autocompletes来帮助用户（只需自动完成国家/地区，无需附加图像）。我看到了两个materialize autocomplete的示例，但总是带有预定义的autocomplete列表。这是我使用的html： <html> <head>  <link href="http

我正在尝试创建一个简单的web应用程序，将国家添加到google表单中。并使用materialize autocompletes来帮助用户（只需自动完成国家/地区，无需附加图像）。我看到了两个materialize autocomplete的示例，但总是带有预定义的autocomplete列表。这是我使用的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>

任何帮助都将不胜感激

答复: 您可以使用web轮询以设置的时间间隔更新页面，以便页面始终从工作表中检索更新的数据

代码：借助答案，编辑脚本以包括：

函数轮询（）{
设置间隔（更新，500）；
}
函数更新（）{
google.script.run.withSuccessHandler（标记）.getCountry（）；
}

并确保在加载时运行

polling（）

函数：

完整page.html:


工作大纲
添加国家/地区
邮寄
函数轮询（）{
设置间隔（更新，500）；
}
函数更新（）{
google.script.run.withSuccessHandler（标记）.getCountry（）；
}
google.script.run.withSuccessHandler（标记）.getCountry（）；
功能标签（列表）{
控制台日志（列表）；
var availableTags=列表；
$（“#自动完成输入”）。自动完成({
资料来源：availableTags
});
};
document.getElementById（“add_btn”）.addEventListener（“单击”，doStuff）；
函数doStuff（）{
var ucontry=document.getElementById（“自动完成输入”）.value；
google.script.run.userClicked（ucontry）；
document.getElementById（“自动完成输入”）.value=“”；
};

并保持

code.gs

文件不变

我希望这对你有帮助

参考资料：

更改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[list[i]] = null;}
  return data;
}

函数doGet（）{
var template=HtmlService.createTemplateFromFile（“页面”）；
var html=template.evaluate（）；
返回html；
}
功能用户点击（国家）{
变量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（“数据”）；
ws.appendRow（[国家]）；
}
函数getCountry（）{
var ws=SpreadsheetApp.getActiveSpreadsheet（）.getSheetByName（“数据”）；
var list=ws.getRange（1,1，ws.getRange（“A1”）.getDataRegion（）.getLastRow（），1.getValues（）；//包含国家/地区
list=list.map（函数（r）{返回r[0]；}）；
Logger.log（列表）；
变量数据={}；
对于（变量i=0；i


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>


工作大纲
国
添加国家/地区
邮寄
google.script.run.withSuccessHandler（标记）.getCountry（）；
功能标签（数据）{
var availableTags=数据；
$（'input.autocomplete'）.autocomplete({
数据：可用标签
});
};
document.getElementById（“add_btn”）.addEventListener（“单击”，doStuff）；
函数doStuff（）{
var ucontry=document.getElementById（“自动完成输入”）.value；
google.script.run.userClicked（ucontry）；
document.getElementById（“自动完成输入”）.value=“”；
};
请查看您的工作表抱歉，回复太晚，我有点不舒服。但是这里有一个链接，您应该首先运行doget函数，然后afterwords作为web应用程序部署，然后它应该可以工作。如果它不工作，这是由于所有者权限，那么您应该只制作一份工作表的副本，然后运行do get和deploy as web应用程序。谢谢你的努力！这是一个web应用程序的链接，谢谢@Rafa，你解决了一些问题。我更改了getCountry（）函数以获得正确的数据格式。成功的管理者似乎很有效，但仍然只有在我手动填写国家时才起作用。当我将国家传递给availabletags变量时，它们似乎不起作用。因此，请随意再看一看，我也将分享该文档的链接，非常感谢您所做的工作！
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[list[i]] = null;}
  return data;
}

<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>