如何将值数组传递给自动完成选项

Question

我正在尝试从Google表格中获取自动填充值列表，并将其传递给具体化的自动填充组件。

所以当我将options参数硬编码为

{数据：{“ Apple”：null，“ Microsoft”：null，“ Google”：“ https://placehold.it/250x250”}

然后运行。因此，我的第一个尝试是生成这种格式的字符串，然后将其传递给无效的脚本bu。我尝试创建对象，生成JSON的所有不同组合

数组肯定是正确创建的-当我记录它时-它看起来像这样：

[[Beausoleil Ch Co], [Cocoa Pod], [Corey], [Full Bloom], [Gina Hardy], [Glenn], [Market  Movers], [Micoud Ch Co], [Montano's Chocolate Company], [NAMDEVCO], [Nature's Discount], [Perez], [Perez Holding Ltd], [Shaheer], [Unknown], [Veg Out-UWI], [Zaboca]]
[19-11-03 06:05:08:305 GMT] [[Beausoleil Ch Co], [Cocoa Pod], [Corey], [Full Bloom], [Gina Hardy], [Glenn], [Market  Movers], [Micoud Ch Co], [Montano's Chocolate Company], [NAMDEVCO], [Nature's Discount], [Perez], [Perez Holding Ltd], [Shaheer], [Unknown], [Veg Out-UWI], [Zaboca]]

HTML代码和实际脚本的其余部分必须正确，因为当我进行硬编码时，它可以工作。我无法工作的是使它从数组中动态化。

    var ss = SpreadsheetApp.openById("1qMIhti8GaONUUeibMAu1hRIxjwnwotKz-YFneIdEAbU")

    function doGet() {

      var form =  HtmlService.createTemplateFromFile("Invoice")
      form.categoriesOptions = wrapRangeInTags(getList("Invoice Categories"))
      form.names = createAutoCompleteList(getList("Names"))
      Logger.log(form.names)
      return form.evaluate()
    }

    function createAutoCompleteList(rangeArray){
      var data = {};
      for(x=0;x<rangeArray.length;x++){
        data[rangeArray[x][0]] = null;
      }
      return data;
    }

    function getList(columnName){
      column = getColumnOptionName(columnName)
      var ws = ss.getSheetByName("Options")
      var numOptions = ws.getRange(2, column).getDataRegion().getLastRow() - 1
      return optionsArray = ws.getRange(2, column, numOptions).getValues()
    }

然后在html中的实际脚本中

    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var selectBoxes = document.querySelectorAll('select');
        M.FormSelect.init(selectBoxes);
        var datePickers = document.querySelectorAll('.datepicker');
        M.Datepicker.init(datePickers);
        var autos = document.querySelectorAll('.autocomplete');
        var instances = M.Autocomplete.init(autos, {data:  <?!= names; ?>});
      });

    </script>

    <div class="row">
         <div class="container">
           <div class="input-field col s12">
              <i class="material-icons prefix">textsms</i>
              <input type="text" id="nameAuto" class="autocomplete">
              <label for="nameAuto">Autocomplete</label>
           </div> 
         </div>
       </div>

使用上面的代码，当我键入时没有自动完成选项出现。当我硬编码时，它们就会执行。

如果正确，我希望传递给它的选项在我键入时显示。

Answer 1

感谢@Sourabh Choraria提供了足够接近我的所需链接

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var selectBoxes = document.querySelectorAll('select');
    M.FormSelect.init(selectBoxes);
    var datePickers = document.querySelectorAll('.datepicker');
    M.Datepicker.init(datePickers);
    var autos = document.querySelectorAll('.autocomplete');
    var autocomplements = google.script.run.withSuccessHandler(function(value) {
       var dynamicOptions = {};
       value.forEach(function(data) {
          dynamicOptions[data[0]] = null
       });
       var autoOptions = {
         data: dynamicOptions}
       M.Autocomplete.init(autos, autoOptions);
    }).getList("Names");
  });

</script>