Блог

Привет, у меня есть этот код, который отлично подходит для создания списка данных, просмотрев мой лист Google и создав список данных, если столбец ‘G’ соответствует слову, указанному в var spec = ‘specific word’; то, что я пытаюсь сделать, это вместо использования предустановленного слова в спецификации переменной, я бынужна переменная spec, чтобы получить ее значение из элемента с именем ‘item1’, поэтому я попытался заменить var spec = ‘конкретное слово’ на var specWord = document.getElementById(‘item1’).value; . Я пробовал всевозможные способы, но, похоже, не могу заставить его работать, я всегда получаю ошибку ReferenceError: specWord не определен вот код, который я использую сейчас

                 <div class="alert alert-primary" role="alert">
    
                   <div class="form-row">

                      <div class="form-group col-md-4"  align="center">
                        <label for="item1">Item / Equipment</label>
                         <input type="text" class="form-control" id="item1" name="item1">
                      </div>
                     
                     <div class="form-group col-md-2" align="center">
                       <script type='text/javascript'>
                        function unitUpdate() {
                         var names = document.getElementById("unit1").value
                          var nameArr = names.split(',');
                          document.getElementById("unit1").value = nameArr[0];
                          }
                       </script>
                      <label for="unitTruck">Unit #</label>
                        <input type="text" id="unit1" class="form-control" list="unitTruck" name="unitTruck" onchange="unitUpdate()">
                       <datalist id="unitTruck"  >
                          <?
                        var sheet   = SpreadsheetApp.getActive().getSheetByName("Over All Rate");


                        var specWord = "Truck"; //  I NEED spec variable TO BE REPLACE BY Element item1 value 
                        

                        var lastRow = sheet.getLastRow();
                            var myRange = sheet.getRange("E2:G" lastRow);
                            var data = myRange.getValues().filter(function([,,g]) {return g.indexOf(specWord ) > -1})
                            for (var i = 0; i < data.length;   i) { ?>
                              <option value="<?!= data[i] ?>">
                               <? } ?>
                          </datalist>
                        </div>
 

Точки модификации:

• При использовании шаблонного HTML загружаются отфильтрованные значения скриплетов, когда загружается HTML like HtmlService.createTemplateFromFile("index").evaluate() . И в вашем скрипте нет скрипта для извлечения значений поиска из текстового ввода. В вашем случае требуется установить отфильтрованные значения, введя значение поиска после загрузки HTML. Для этого я хотел бы предложить следующие 2 шаблона.

1. Все значения извлекаются с помощью скриплетов при загрузке HTML, а значения фильтруются по полученному значению поиска и вводятся в текстовый ввод.
2. Отфильтрованные значения извлекаются с использованием google.script.run после загрузки HTML.

Когда вышеуказанные пункты будут отражены в вашем скрипте, это будет выглядеть следующим образом.

Шаблон 1:

В этом шаблоне все значения извлекаются с помощью скриплетов при загрузке HTML-кода, а значения фильтруются по полученному значению поиска и вводятся в текстовый ввод. В этом случае скрипт на стороне HTML и Javascript модифицируется.

Модифицированный скрипт:

 <div class="form-group col-md-4"  align="center">
  <label for="item1">Item / Equipment</label>
  <input type="text" class="form-control" id="item1" name="item1">
</div>
<div class="form-group col-md-2" align="center">
  <label for="unitTruck">Unit #</label>
  <input type="text" id="unit1" class="form-control" list="unitTruck" name="unitTruck" onchange="unitUpdate()">
  <datalist id="unitTruck"></datalist>
</div>

<script type='text/javascript'>
function unitUpdate() {
  var names = document.getElementById("unit1").value
  var nameArr = names.split(',');
  document.getElementById("unit1").value = nameArr[0];
}

// I modified below script.
<?
var sheet = SpreadsheetApp.getActive().getSheetByName("Over All Rate");
var data = sheet.getRange("E2:G"   sheet.getLastRow()).getValues();
?>
var values = JSON.parse(<?= JSON.stringify(data) ?>);

document.getElementById("item1").addEventListener("change", e => {
  var v = values.filter(function([,,g]) {return g.indexOf(e.srcElement.value) > -1});
  var el = document.getElementById("unitTruck");
  while (el.firstChild) el.removeChild(el.firstChild);
  v.forEach(val => {
    var option = document.createElement("option");
    option.setAttribute("value", val);
    el.appendChild(option);
  })
});
</script>
 

• При использовании модифицированного скрипта, описанного выше, при загрузке HTML все значения извлекаются из электронной таблицы, а полученные значения используются для фильтрации.
• Например, если Электронная таблица обновляется во время использования HTML, обновленные значения не используются. Потому что все значения загружаются при загрузке HTML. Но скорость отклика будет немного выше, чем у шаблона 2.
• Если вы хотите запустить скрипт во время ввода значения, пожалуйста, измените addEventListener("change", (e) => { на addEventListener("input", (e) => { .

Шаблон 2:

В этом шаблоне отфильтрованные значения извлекаются google.script.run при вводе значения поиска после загрузки HTML. В этом случае скрипт использует как HTML и Javascript, так и Google Apps Script.

Сторона HTML и Javascript: index.html

 <div class="form-group col-md-4"  align="center">
  <label for="item1">Item / Equipment</label>
  <input type="text" class="form-control" id="item1" name="item1">
</div>
<div class="form-group col-md-2" align="center">
  <label for="unitTruck">Unit #</label>
  <input type="text" id="unit1" class="form-control" list="unitTruck" name="unitTruck" onchange="unitUpdate()">
  <datalist id="unitTruck"></datalist>
</div>

<script type='text/javascript'>
function unitUpdate() {
  var names = document.getElementById("unit1").value
  var nameArr = names.split(',');
  document.getElementById("unit1").value = nameArr[0];
}

// I added below script.
document.getElementById("item1").addEventListener("change", e => {
  google.script.run.withSuccessHandler(v => {
    var el = document.getElementById("unitTruck");
    while (el.firstChild) el.removeChild(el.firstChild);
    v.forEach(val => {
      var option = document.createElement("option");
      option.setAttribute("value", val);
      el.appendChild(option);
    })
  }).getValues(e.srcElement.value);
});
</script>
 

Сторона скрипта Google Apps: Code.gs

 function getValues(specWord) {
  var sheet   = SpreadsheetApp.getActive().getSheetByName("Over All Rate");
  var lastRow = sheet.getLastRow();
  var myRange = sheet.getRange("E2:G" lastRow);
  var data = myRange.getValues().filter(function([,,g]) {return g.indexOf(specWord ) > -1});
  return data;
}
 

• Если такое же название функции getValues включено в ваш газовый проект, пожалуйста, переименуйте его. Пожалуйста, будьте осторожны с этим.
• При использовании модифицированного скрипта выше, после загрузки HTML, когда вы вводите значение в «Item / Equipment» и значение forcus перемещается из текстового ввода в другие, скрипт запускается, и вы можете увидеть отфильтрованные значения в «Unit #». В этом модифицированном скрипте, когда значение присваивается «Товар / оборудование», значения «Unit #» обновляются каждый раз.
• Например, если электронная таблица обновляется во время использования HTML, можно использовать обновленные значения. Поскольку значения извлекаются каждый раз, когда вводится значение поиска. Но скорость ответа будет немного ниже, чем у шаблона 1.

Примечание:

• Если вы хотите запустить скрипт во время ввода значения, пожалуйста, измените addEventListener("change", (e) => { на addEventListener("input", (e) => { .

Ссылка:

• Служба HTML: шаблонный HTML