使用Google App脚本在网络应用中自动完成用户选择器

Question

有没有一种方法可以在带有Google Apps脚本的Web应用程序中具有自动完成用户选择器，该脚本会调用Google域的全局目录？

我开始检查materializecss，但不了解如何在GAS中实施。

谢谢！

更新：我想实现这样的解决方案：https://www.jqueryscript.net/demo/Dynamic-Autocomplete-Multi-select-Plugin-With-jQuery-magicsearch/multiple.html 是否可以在Google Apps脚本中执行此操作？

function doGet() {
  var template = HtmlService
                 .createTemplateFromFile('Autocomplete');

  var htmlOutput = template.evaluate()
                   .setSandboxMode(HtmlService.SandboxMode.NATIVE)
                   .setTitle('jQuery UI Autocomplete - Default functionality');

  return htmlOutput;
}
function getListUsers() {
  var pageToken;
  var tabUsers = [];
    do {
      var response = AdminDirectory.Users.list({
        "customer": 'my_customer',
        "orderBy": 'email',
        "maxResults": 100,
        "pageToken": pageToken,
        // Ajout de RegEx dans le cas ou le nom des OU comporte de " ou ' 
       // "query": "orgUnitPath:'"+GLOBAL.pathOu.replace(/"/gi, '\\"').replace(/'/gi, "\\'")+"'"
      });
      var users = response.users;
      if (users) {
//        Logger.log(orgUnit);
        for (var j = 0; j < users.length; j++) {
          var user = users[j];
         
         Logger.log(user.primaryEmail);
          tabUsers.push(user.primaryEmail);
        }
      } else {
        //Logger.log('OU '+ GLOBAL.pathOu.replace(/"/gi, '\\"').replace(/'/gi, "\\'") + ': No users found.');
        Logger.log('No users found.');
      }
      pageToken = response.nextPageToken;
    } while (pageToken);
  Logger.log(tabUsers.length);
  return( tabUsers );
}

//function doGet(request) {
//  return HtmlService.createTemplateFromFile('index.html')
//      .evaluate();
//}

function processForm(resultat) {
  GLOBAL.groupEmail = resultat.emailGroupe;
  GLOBAL.userException = resultat.emailException;
  GLOBAL.pathOu = resultat.pathOu;
  Logger.log(GLOBAL);
  main();
  return resultat;
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}



/**
Function création Google groupe
*/
function all(){
  var groupEmail = 'pierre@mail.fr';
  AdminDirectory.Groups.remove(groupEmail);
  AdminDirectory.Groups.insert({
    "email": groupEmail,
    "description":"blablabla",
    "name":"Groupe de test Pierre",
    "isArchived": string,
    "archiveOnly": string,
    "includeInGlobalAddressList": string,
    "allowExternalMembers": string,
    "showInGroupDirectory": string,
    "whoCanViewMembership": string,
    "whoCanViewGroup": string});

//    https://developers.google.com/admin-sdk/groups-settings/v1/reference/groups
//  "whoCanAdd": string,
//  "whoCanJoin": string,
//  "whoCanViewGroup": string,
//  "whoCanInvite": string,
//  "whoCanPostMessage": string,
//  "allowWebPosting": string,
//  "primaryLanguage": string,
//  "maxMessageBytes": integer,
//  "messageModerationLevel": string,
//  "spamModerationLevel": string,
//  "replyTo": string,
//  "customReplyTo": string,
//  "includeCustomFooter": string,
//  "customFooterText": string,
//  "sendMessageDenyNotification": string,
//  "defaultMessageDenyNotificationText": string,
//  "allowGoogleCommunication": string,
//  "membersCanPostAsTheGroup": string,
//  "messageDisplayFont": string
//  "whoCanLeaveGroup": string,
//  "whoCanContactOwner": string,
//  "whoCanAddReferences": string,
//  "whoCanAssignTopics": string,
//  "whoCanUnassignTopic": string,
//  "whoCanTakeTopics": string,
//  "whoCanMarkDuplicate": string,
//  "whoCanMarkNoResponseNeeded": string,
//  "whoCanMarkFavoriteReplyOnAnyTopic": string,
//  "whoCanMarkFavoriteReplyOnOwnTopic": string,
//  "whoCanUnmarkFavoriteReplyOnAnyTopic": string,
//  "whoCanEnterFreeFormTags": string,
//  "whoCanModifyTagsAndCategories": string,
//  "favoriteRepliesOnTop": string,
  
//  
//  var users = ['pierre001.test@test.gpartner.eu','pierre002.test@test.gpartner.eu'];
// for (var i; i < users.length; i++) {
//      var user = users[i]
//      try {
//        var insertMembre = AdminDirectory.Members.insert({'email':user},GLOBAL.groupEmail);
//        Logger.log(user+" membre inséré");
//      }
//      catch(error) {
//        Logger.log(user+" error: " + error);
//      }
};

/**
 * Lists Users of the Domain Directory
 */
function listUsers() {
  var pageToken;
  var tabUsers = [];
    do {
      var response = AdminDirectory.Users.list({
        "customer": 'my_customer',
        "orderBy": 'email',
        "maxResults": 100,
        "pageToken": pageToken,
        // Ajout de RegEx dans le cas ou le nom des OU comporte de " ou ' 
       // "query": "orgUnitPath:'"+GLOBAL.pathOu.replace(/"/gi, '\\"').replace(/'/gi, "\\'")+"'"
      });
      var users = response.users;
      if (users) {
//        Logger.log(orgUnit);
        for (var j = 0; j < users.length; j++) {
          var user = users[j];
         
         Logger.log(user.primaryEmail);
          tabUsers.push(user.primaryEmail);
        }
      } else {
        //Logger.log('OU '+ GLOBAL.pathOu.replace(/"/gi, '\\"').replace(/'/gi, "\\'") + ': No users found.');
        Logger.log('No users found.');
      }
      pageToken = response.nextPageToken;
    } while (pageToken);
  Logger.log(tabUsers.length);
  return tabUsers;
};



/** TEST FIDDLE 




*/

<style type="text/css">
@import url("https://fonts.googleapis.com/css?family=Montserrat:200");

body {
  height: 100vh;
}

.hidden {
  display: none;
}

.multiselect-wrapper {
  max-height: 100px;
  overflow-y: auto;
  border: 1px solid #ccc;
}

.multiselect {
  text-align: left;
  height: 16px!important;
  overflow: hidden;
  padding: 6px 3px;
  resize: none;
  color: black;
  background-color: white;
}

.multiselect,
.multiselect:focus {
  font-size: 13px;
  border: 0!important;
  margin: 0!important;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.selected {
  font-size: 13px;
  display: inline-block;
  padding: 3px;
  vertical-align: top;
}

.value-wrapper {
  font-size: 13px;
  background-color: #f5f5f5;
  border: 1px solid #d9d9d9;
  cursor: default;
  display: block;
  height: 20px;
  white-space: nowrap;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  display: inline-block;
}

.value-wrapper:hover {
  border-color: #b9b9b9;
}

.value {
  display: inline-block;
  color: #222;
  margin: auto 5px;
  max-width: 325px;
  max-height: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
  /*   cursor: move; */
}

.value-close {
  display: inline-block;
  width: 14px;
  height: 20px;
  background: no-repeat url(//ssl.gstatic.com/apps/gadgets/contactarea/contactarea_sprite_2.gif) -4px 0;
  opacity: .6;
  vertical-align: top;
  cursor: pointer;
}

.multiselect-display {
  border: 1px solid #ccc;
  cursor: text;
  padding: 4px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}


</style>

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
    <script type="text/javascript"src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript"src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css">
    
  </head>
  <body>
   
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>


<script>
// This code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(buildTagList)
      .getListUsers();
});

function buildTagList(tabUsers) {
  $( "#tags" ).autocomplete({
    source: tabUsers
  });
}
</script>
  </body>
</html>