A dropdown menu generated from a Google Sheet script that allows for the input of custom text alongside predefined

Question

A dropdown menu generated from a Google Sheet script that allows for the input of custom text alongside predefined

Currently, I am working on creating a dropdown list that not only allows me to select items but also input free text. The code below enables me to choose an item from a selected range in Google Sheets. However, I am looking for a way to incorporate the functionality to input new text as well. I have tried using Datalist without much success. Any assistance or advice on how to achieve this would be highly appreciated.

<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>

javascript google-apps-script bootstrap-4

Answer 1

Answer №1

It seems that your objective is to include a text input in a dropdown list.

You are looking to add a text input field for the dropdown list.

One suggestion could be to utilize the datalist tag as shown below:

Modified code snippet:

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

<div class="form col-md-6">
<label for="emp1">Client</label>
<input type="text" id="input" list="emp1" placeholder="Insert text here.">
<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>

Upon opening the HTML page, you can freely enter text into the input field.
By clicking the drop-down arrow on the right side of the input field, the list will appear.
Clicking the "Click" button will retrieve the value, which can be viewed in the console log.

Related Resource:

Learn more about the datalist element

Answer 2

It seems that your objective is to include a text input in a dropdown list.

You are looking to add a text input field for the dropdown list.

One suggestion could be to utilize the datalist tag as shown below:

Modified code snippet:

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

<div class="form col-md-6">
<label for="emp1">Client</label>
<input type="text" id="input" list="emp1" placeholder="Insert text here.">
<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>

Upon opening the HTML page, you can freely enter text into the input field.
By clicking the drop-down arrow on the right side of the input field, the list will appear.
Clicking the "Click" button will retrieve the value, which can be viewed in the console log.

Related Resource:

Learn more about the datalist element

A dropdown menu generated from a Google Sheet script that allows for the input of custom text alongside predefined

Answer №1

Modified code snippet:

Related Resource:

Similar questions

Guide to interpreting an Angular expression using traditional JavaScript conventions

Enhancing infinite scroll functionality with ajax integration

I'm encountering a Type Error message in VS Code terminal stating that converting data to string is not a function. Can someone please help me understand this type error? I am new to Node.js and

Tips for creating clickable selections with AutoComplete JQuery in ASP.NET and C#

Tips for holding off until the fetch operation is complete

Scrolling Down on a Jquery Login Page

Tips for sending API requests as an object rather than an array

React Virtualized - Blank screen issue occurring because of continuous scrolling through a large list of ITSM items

Executing an AJAX request with a specific state in Node.js

Obtain the current name of the Material UI breakpoint

Adjust camera to align with the loaded object in Three.js

Single-select components in React Native

Send a bundle of data through AJAX requests

Retrieving the value of an inputtext component in PrimeFaces using jQuery

Transform the jQuery each method into vanilla JavaScript

Exchanging the positions of two elements within a 2D array

The program is unable to locate the script files I have saved

You can use the following code to retrieve the value of the checked radio button with the name "nameOfradio", but make sure that the radio button

``Can you provide step-by-step instructions on how to delete a particular item from

Tips for managing JavaScript within PHP code and vice versa