Google Apps ScriptでGmaiのアドレス帳のメールアドレス予測変換をする入力欄を作ってみる

GMAILメールアドレス予測をする入力欄を作ってみたので
サーバ側はコード.gs（GAS）でやります
chrome、firefoxは動作しますがIEはダメでした
safariは未確認です
佐藤やら山田等の名前　gmail やらのアドレスの一部などを入力して見て下さい
※jquery.min.js,jquery-ui.min.js,jquery-ui.cssを使用します。
んー、、投稿直後ってjqueryなどの読み込み動かないっぽいです？ 　　
ロード時の処理を書いてしまったのが影響してました 　　
とりあえず動くようになったと思います。
SAMPLE

Ｔｏ： ×
Ｃｃ： ×

以下コードです
HTMLから

  <div id="jquery-ui-autocomplete" class="ui-widget">
    <label for="jquery-ui-autocomplete-label">Ｔｏ：</label>
    <input id="mailto">
    <span id="close1" class="close" title="Close" onclick="adclear(1)">×</span>
    </input><br />
    <label for="jquery-ui-autocomplete-label">Ｃｃ：</label>
    <input id="mailcc">
    <span id="close2" class="close" title="Close" onclick="adclear(2)">×</span>
    </input><br />
  </div>
  

span行は無くてもいいですが、×をつけたかったのでつけてます

CSSです。×ボタンが要らない場合は
21行目から不要です

    .ui-autocomplete {
      max-height: 200px;
      overflow-y: auto;
      overflow-x: hidden;
      font-size: 15px;
    }
    #jquery-ui-autocomplete label {
      float: left;
      margin-right: 5px;
      margin-top: 8px;
      color: black;
      font-size: 15px;
    }
    #mailto,#mailcc {
      margin-left: 5px;
      font-size: 15px;
      width: 350px;
      font-family: 'Noto Sans Japanese', sans-serif;
      margin-top: 5px;
    }
    #mailto:hover + .close,#mailcc:hover + .close {
      display: inline-block;
    }
    .close {
      display: none;
      background-color: #848484;
      border-radius: 50%;
      color: white;
      cursor: pointer;
      font-size: 12px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      top: 0px;
      position: relative;
      right: 20px;
      width: 16px;
    }
    .close:hover {
      display: inline-block;
    }
  

まずhead内のjavascriptで必要なものをロードします

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" />
      <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
  

メインのjavascriptです

    <script type="text/javascript">
    var ArrData = new Array;
    //×押下時 内容クリア
    function adclear(prm) {
      switch (prm) {
      case 1:
        document.getElementById('mailto').value = "";
        break;
      case 2:
        document.getElementById('mailcc').value = "";
        break;
      case 3:
        break;
      }
    }
    $(function () {
        //アドレス取得
        google.script.run.withSuccessHandler(onSuccess)
        .withFailureHandler(onFailure) .getContact();

        function onSuccess(result) {
          for (var i = 0; i < result.length; i++) {
            var num = ArrData.push(result[i]);
          }
          var word = [];
          for (var i = 0; i < ArrData.length; i++) {
            word.push(String(ArrData[i]));
          }
          var pin = word;
          $("#mailto").autocomplete({
            source: pin
          });
          $("#mailcc").autocomplete({
            source: pin
          });
        }
      },

      function onFailure(e) {
        alert("連絡先にアクセス失敗しました");
      }
    );
  </script>
  

最後にサーバ側gsです。アドレス帳の取得が主な処理です。

    function doGet(e) {
      try{
        return HtmlService.createHtmlOutputFromFile('index');
      }catch(err){
      }
    }

    function getContact() {
      var wadress = new Array;
      var con = ContactsApp.getContacts();
      for(var i = 0;i < con.length;i++){
        var name = con[i].getFullName();
        var emails = con[i].getEmails();
        for (var j in emails) {
            var num = wadress.push(name + "(" + emails[j].getAddress() + ")");
        }
      }
      return wadress;
    }
  

×ボタンのクリア方法などはもうちょっと工夫するとswichとかいらないですが
面倒だったのでこのまま；
あとは要素の追加削除を加えれば
どんどんアドレスを追加していけるような入力欄も作れるかも？