title: error at logging a side-page html - autocomplete item not working
body: <p>I'm working on a project, where the user will use side-bar html page, as a form to update a sheet (very basic operation).
  I'm having issue with the autocomplete part.</p>
  
  <p>I'm a beginner to code html with google apps script, so please let me know if you don't have enough information.</p>
  
  <p>The script is supposed to get names from a google sheets, and populate it to the autocomplete item.</p>
  
  <p>I followed a tutorial doing practically the same operation, but based on a web app using a google spreadsheet ==> this one worked perfectly for me. 
  The challenge is now into adapting it to a sidebar page on google sheet ==> does not work at the moment.</p>
  
  <p>I've been struggling for hours and trying different options, so here is :
  - What I made on gs page :</p>
  
  <pre><code>var ss = SpreadsheetApp.getActiveSpreadsheet();
  var shEmployees = ss.getSheetByName("Employes");
  
  var colEmploye_nomPrenom=1;
  var colEmploye_barcode=colEmploye_nomPrenom+1;
  var colEmploye_mail=colEmploye_barcode+1;
  var colEmploye_metier=colEmploye_mail+1;
  
  function loadBasicForm(){
     var tmp=HtmlService.createTemplateFromFile("basicHtmlForm");
     var html = tmp.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
      html.setTitle("Test");
      SpreadsheetApp.getUi().showSidebar(html);
  
  }//function loadBasicForm(){
  
  
  function getUnactiveEmployees(){
  
    var ws=shEmployees;
    var values= ws.getRange(1,1,ws.getLastRow(),colEmploye_metier).getValues();
    var options={};
  
    for (var i=0;i&lt;values.length;i++){    
      var name=values[i][colEmploye_nomPrenom-1];
      var job=values[i][colEmploye_metier-1];
      var testUnactive_OK=job=="Désactivé";
      if (testUnactive_OK){
        options[name]=null;            
      }//if (testUnactive_OK){        
    }//for (var i=0;i&lt;values.length;i++){
  
    Logger.log (options);//returns  {employee1=null, employee8=null, employee3=null, employee9=null, employee5=null, employee10=null, employee7=null, employee6=null, employee11=null, employee4=null, employee2=null}
    return options;
  
  }
  </code></pre>
  
  <p>What I made on html page : </p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;      
        &lt;base target="_top"&gt;
        &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;&lt;!--Import Google Icon Font--&gt;      
        &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"&gt;&lt;!-- Compiled and minified CSS --&gt;      
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt; &lt;!--Let browser know website is optimized for mobile--&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
         &lt;div class="container"&gt;        
            &lt;div class="row"&gt;   
               &lt;div class="input-field col s12"&gt;
                 &lt;i class="material-icons prefix"&gt;account_circle&lt;/i&gt;
                 &lt;input type="text" id="searchedEmployee" class="autocomplete" required&gt;&lt;!-- ISSUE AT FILLING IT  --&gt;
                 &lt;label for="searchedEmployee"&gt;Spell a Name&lt;/label&gt;
               &lt;/div&gt;   
            &lt;/div&gt;&lt;!-- END ROW --&gt;            
         &lt;/div &gt;&lt;!-- END CONTAINER --&gt;    
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"&gt;&lt;/script&gt; &lt;!-- Compiled and minified JavaScript --&gt;
      &lt;script&gt;    
  
        document.addEventListener('DOMContentLoaded', function() {    
            google.script.run.withSuccessHandler(populateEmployees).getUnactiveEmployees();              
        });         
        function populateEmployees(employees){  
          var autocomplete = document.getElementById('searchedEmployee');
          var instances = M.Autocomplete.init(autocomplete, { data:employees }); 
        }     
  
        &lt;/script&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p>At this point, the side-page is displayed, but nothing is suggested at typing, for example : "emp" for "employeeX" expected with the "getUnactiveEmployees" list.</p>
  
  <p>EDIT : 
  My issue is not about displaying - that does displaying. 
  What I cannot do, is to allow the script to autocomplete the item "searchedEmployee". I guess there is an error on this part : </p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', function() {    
                google.script.run.withSuccessHandler(populateEmployees).getUnactiveEmployees();              
            });
  </code></pre>
  
  <p>Do you have any idea of what I did wrong ? </p>
  
  <p>Many thanks ! </p>