выпадающий список из скрипта Google Sheet с возможностью вставки свободного текста

#javascript #google-apps-script #bootstrap-4

Вопрос:

Итак, я пытаюсь получить выпадающий список, который позволил бы мне также вставлять свободный текст с помощью этого кода я могу выбрать элемент из выбранного диапазона в Google Sheet, но есть ли способ сделать так, чтобы он также позволял вводить новый текст. Вот мой код, который я также пробовал использовать Datalist (может быть лучше), но я не смог заставить его работать должным образом, любая помощь будет с благодарностью

 <div class="row">
        <script type="text/javascript"></script>
 
         <script>
          <?
          var sheet   = SpreadsheetApp.openById("ID").getSheetByName("Sheet");
          var lastRow = sheet.getLastRow();  
          var myRange = sheet.getRange("A2:A" lastRow); 
          var data    = myRange.getValues();
          
          ?>
          google.script.run.withSuccessHandler(populategetEmp1).getEmp1();
         </script>  
   
    <div class="form col-md-6">
      <label for="emp1">Client</label>
        <select  id = "emp1" class="form-control" >
         <option value=""  ></option> 
         <? for (var i = 0; i < data.length;   i) { ?>
         <option ><?!= data[i] ?></option>
         <? } ?>
        </select>
      </div>

Ответ №1:

Я считаю, что ваша цель заключается в следующем.

Вы хотите добавить ввод текста для выпадающего списка.

В этом случае, как насчет использования тега datalist следующим образом?

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

 <script>
function test() {
  var value = document.getElementById("input").value;
  console.log(value)
}

//google.script.run.withSuccessHandler(populategetEmp1).getEmp1();
//
//function populategetEmp1() {
//  return;
//}
</script>

<div class="form col-md-6">
<label for="emp1">Client</label>
<input type="text" id="input" list="emp1" placeholder="Input text.">
<datalist id="emp1" class="form-control" >
  <?
  var sheet   = SpreadsheetApp.openById("ID").getSheetByName("Sheet");
  var lastRow = sheet.getLastRow();
  var myRange = sheet.getRange("A2:A" lastRow);
  var data    = myRange.getValues();
  for (var i = 0; i < data.length;   i) { ?>
  <option value="<?!= data[i] ?>">
  <? } ?>
</datalist>
</div>
<button onclick="test()">Click</button>

Когда вы открываете HTML, вы можете ввести свободный текст в текстовый ввод.
Когда вы нажимаете на перевернутый треугольник в правой части ввода текста, отображается выпадающий список.
Когда вы нажимаете кнопку «Click», значение извлекается, и вы можете увидеть его на консоли.

Ссылка:

datalist