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

时间:2019-11-03 06:10:17

标签: javascript google-apps-script materialize

我正在尝试从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>

使用上面的代码,在我键入时没有自动完成选项出现。他们在我硬编码时会这样做。

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

1 个答案:

答案 0 :(得分: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>