Автозаполнение в скрипте Google Apps с данными из Google Sheets

Question

Я пытаюсь использовать Google Apps Script для создания формы, где поля допускают автозаполнение. В других формах, которые я создал, я смог вытащить массив опций из листа Google и использовать их для заполнения выпадающего списка, поэтому я должен подумать, что можно сделать то же самое с процессом автозаполнения.

Я явно скопировал этот пример из w3schools, и он работает точно так, как нужно, пока я объявляю массив в javascript (как сделано в примере). Но я не смог понять, как заполнить массив опциями, извлеченными из моего листа Google.

Вот с чего я начал:

var PMOSupport;

$(function() {
   google.script.run.withSuccessHandler(buildDropDowns)
   .getPMOSupport();
});


function buildDropDowns(data) {
  PMOSupport = data;
  console.log(PMOSupport);
}


function autocomplete(inp, arr) {
  console.log("ENTER AUTO");
  var currentFocus;
  inp.addEventListener("input", function(e) {
  // all of the remaining code is direct from the w3schools example
  // I'm cutting it from here for brevity, 
  // and because I know this works, when using the declared array below
  });
}

var countries = ["Afghanistan","Albania","Algeria","Andorra"];

// this line works fine, when using the array declared above    
// autocomplete(document.getElementById("myInput"), countries);  

// this line does not work, when trying to use the array populated from the google sheet
autocomplete(document.getElementById("myInput"), PMOSupport);  

Когда я запускаю этот, страница создается, и как только я набираю в поле ввода, я получаю сообщение в консоли:

`Uncaught TypeError: Cannot read property 'length' of undefined`
    at HTMLInputElement.<anonymous> (<anonymous>:32:28)

Когда я смотрю на это, он говорит, что аргумент 'arr' (PMOSupport)не заселенВот почему я добавил 2 строки console.log, чтобы посмотреть, что происходит. Когда я открываю страницу, сначала регистрируется «ENTER AUTO», затем состояние меняется с «Неактивно» на «Занято» и «Не занято» (пока он вызывает getPMOSupport ()), затем массив консоли PMOSupport регистрируется в консоли (также подтверждая, что я действительнополучение правильных данных с листа). Ясно, что он вводит функцию autocomplete (), прежде чем вызывает google.script.run.withSuccessHandler (buildDropDowns) .getPMOSupport (), поэтому аргумент 'arr' не определен.

Я пробовалразличные способы вывести это из блока $(function() … });, чтобы попытаться заполнить массив PMOSupport перед запуском функции autocomplete (). Ничто из того, что я сделал, похоже, не работает.

Я уверен, что это что-то простое и вызвано вредными привычками, которые я приобрел с течением времени (я не разработчик, я просто собираю вещи вместедля моей команды). Но любая помощь будет оценена.

Answer 1

Вам нужно позвонить autocomplete ПОСЛЕ того, как асинхронный код вернулся. Итак, вам нужно вызвать его из обратного вызова.

function buildDropdowns(data, userObject) {
  // probably you should indicate in data which field these data is for, or use
  // the userObject parameter in the google.script.run API
  autocomplete(document.getElementById("myInput"), data); 
}

В качестве альтернативы (я не смотрю и не буду смотреть на код w3schools), сначала объявите ваш PMOSupport как массив const, а затем добавьте в него записи из вашего обратного вызова (вместопереназначение его). Таким образом, переменная не является неопределенной, она просто пуста в начале. В зависимости от реализации кода автозаполнения, это может или не может работать для вас.

const PMOSupport = [];
....
function buildDropdowns(data) {
  PMOSupport.push(...data);
  // or
  // Array.prototype.push.apply(PMOSupport, data);
}