Добавьте список значений Google Sheet в функцию автозаполнения материализации - PullRequest
Новая
       3

Добавьте список значений Google Sheet в функцию автозаполнения материализации

0 голосов
/ 22 января 2020

Я пытаюсь создать простое веб-приложение, которое добавит страны в лист Google. И используйте материализацию автозаполнения, чтобы помочь пользователю (который просто автозаполнение страны, без прикрепленных изображений). Я видел несколько примеров автозаполнения материализации, но всегда с предопределенным списком автозаполнения. Это 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, функция 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'
      },
    });
  });

Любая помощь будет принята с благодарностью!

Ответы [ 2 ]

2 голосов
/ 24 января 2020

Ответ:

Вы можете использовать веб-опрос, чтобы обновить страницу с заданным интервалом, чтобы он всегда извлекал обновленные данные из листа.

Код:

Воспроизведение ответа здесь , отредактируйте ваш скрипт, включив в него: 

function polling(){
  setInterval(update, 500);
}
function update(){
  google.script.run.withSuccessHandler(tags).getCountry();        
}

и убедитесь, что вы запускаете функцию polling() на загрузка: 

<body onload="polling()">
  <!-- your body goes here -->
</body>

Полная страница. html: 

<html>
<head>
    <meta charset="utf-8">
    <!--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" />

    <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 onload="polling()">
    <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" placeholder="Country">
                </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>
    <script>
        function polling(){
          setInterval(update, 500);
        }
        function update(){
          google.script.run.withSuccessHandler(tags).getCountry();        
        }

        google.script.run.withSuccessHandler(tags).getCountry();
        function tags(list) {
          console.log(list);
          var availableTags = list;
          $("#autocomplete-input").autocomplete({
              source: 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>

И оставьте ваш code.gs файл без изменений.

Я надеюсь это полезно для вас!

Ссылки:

0 голосов
/ 25 января 2020

Изменение функции 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;
}

И 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...