Как передать массив значений в опции автозаполнения - PullRequest
Новая
       17

Как передать массив значений в опции автозаполнения

2 голосов
/ 03 ноября 2019

Я пытаюсь выбрать список значений автозаполнения из листов Google и передать их компоненту автозаполнения материализации.

Поэтому, когда я жестко кодирую параметр параметров как

{data: {"Apple": ноль, "Microsoft": ноль, "Google": 'https://placehold.it/250x250'}

Тогда это работает. Поэтому моей первой попыткой было сгенерировать строку в этом формате и передать ее сценарию, который не работал. Я пытался создавать объекты, генерируя 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 Ответ

1 голос
/ 03 ноября 2019

Спасибо @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>
...