来自谷歌工作表脚本的下拉列表，带有插入自由文本的选项

Question

所以我试图获得一个下拉列表，该列表允许我也使用此代码插入自由文本我可以从我在谷歌表格中选择的范围中选择一个项目但是有没有办法让它也允许文本输入新的文本。这是我的代码我也尝试过使用数据列表（可能会更好）但是我无法让它正常工作任何帮助将不胜感激<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>

Answer 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 时，您可以将自由文本输入到文本输入中。

当您单击文本输入右侧的倒三角形时，将显示下拉列表。

当您单击“单击”按钮时，将检索该值，您可以在控制台上看到它。