0

I want to create a searchable dropdown menu to select the available customers from a column in a Google Sheets document.

So far, I have tried to populate the field with options using the below code but I keep getting this error:

Cannot read properties of undefined (reading 'addOption')

The array returns an array in this format:

[[Customer 1], [Customer 2]]

Do you have any idea how to solve the error?

    <script>
      $(function() {    

  $('#customer').selectize({
    delimiter: ',',
    persist: false
  });

});
      (function () {
        google.script.run.withSuccessHandler(
          function (selectList) {
            var $select = $(document.getElementById('customer'));        
            var selectize = $select[0].selectize;
            for( var i=0; i<selectList.length; i++ ) {
              
                selectize.addOption({ value: i+1, text: selectList[i] });
                selectize.addItem(i+1);
                };
          }
        ).getSelectList();
      }());
    </script>
      <div class="form-group row">
    <label for="kunde"class="col-sm-2 col-form-label">Kunde</label>

  </div>
    <div class="col-sm-10">
<select id="customer" placeholder="Select a customer...">
</select>
    </div>

Code.gs

function getSelectList() {
  try {
    var sheet = SpreadsheetApp.openById("file-id").getSheetByName("Kunden");
    var values = sheet.getRange(2,1,sheet.getLastRow(),1).getValues();
    return values
  }
  catch(err) {
    Logger.log(err);
  }
};
Lukas Klemend
  • 3
  • 2
  • Do you have JQuery linked in the head? Also it sounds like you want to create a selection drop down in a Spreadsheet or perhaps a Google Document. You could create one in a column of a spreadsheet with validation but I don't think you can create one in a Google Document and you certainly are not going to do it with clientside javascript with or without JQuery. Atleast I don't know how to. – Cooper May 02 '22 at 16:22
  • Similar to this question I want to do the same but that the select is searchable https://stackoverflow.com/questions/54751206/populate-a-html-drop-down-box-select-with-data-from-a-google-sheet I thought that selectize would be a good alternative because I want to have users to be able to search in the html form so that "Company Example 1" would come up if they would search for example and also selectize allows users to add options – Lukas Klemend May 02 '22 at 18:44
  • I'm not familiar with selectize. I pretty much stick will Vanilla Javascript. But if you're just trying to create a dialog with a select that should be pretty simple – Cooper May 02 '22 at 19:25
  • Like Cooper I try to stick to vanilla HTML and javascript. I don't use jquery. If you'll notice – TheWizEd May 02 '22 at 19:26
  • I have to apologize for my poor English skill. In your question, do you want to remove your current issue? Or, do you want to achieve `I want to have users to be able to search in the html form so that "Company Example 1" would come up if they would search for example and also selectize allows users to add options`? I couldn't understand your question. I apologize for this. – Tanaike May 03 '22 at 00:53

0 Answers0