回答編集履歴

1 追記ありのため

whitedoragon

whitedoragon score 4

2018/05/22 10:02  投稿

更に調べていきましていろいろ試しましたところ、自己解決しましたので
ご報告させていただきます。
下記サイトを参考・更に読み進めていきまして、セレクトボックス(検索機能)を
【javascript.html】getSelectList()イベント内に生成させていただきました。
※リンク元 [select2の使い方](https://iritec.jp/web_service/11240/)  
 
あと、投稿時に【stylesheet.html】を記述するのを忘れていましたが
その中にも検索機能がついているスタイルの記述を追記しました。
※リンク先  
[select2の使い方](https://iritec.jp/web_service/11240/)  
【javascript.html】
```ここに言語を入力
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/7bcbed1321.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.8/validator.min.js"></script>
<script>
<!-- 以下を追記 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<!-- ここまで -->
/**
コード.jsのgetSelectListFromSS()を読んで、スプレッドシートのデータをもとに、セレクトボックスを構築する
*/
function getSelectList() {
   try {
       google.script.run
           .withSuccessHandler(function(result) {
               console.log("result", result);
               var select = document.getElementById('select_id3');
               var option = document.createElement('option');
               option.setAttribute('value', '');
               option.setAttribute('selected', true);
               option.innerHTML = '未選択';
               select.appendChild(option);
                        //以下を追記
                        $('select').select2();
                  //ここまで
               for (var i = 0; i < result.data.length; i++) {
                   option = document.createElement('option');
                   option.setAttribute('value', i + 1);
                   option.innerHTML = result.data[i];
                   select.appendChild(option);
               }
           })
           .withFailureHandler(function(result) {
               toastr.error('リストの取得に失敗しました。', result);
           })
           .getSelectListFromMasterSS();
   } catch (e) {
       toastr.error(e);
   }
}
// 処理中アイコン表示・非表示
function processing(processing) {
   if (processing) {
       document.getElementById('processing').style.visibility = "visible";
       document.getElementById('send_button').setAttribute("disabled", true);
   } else {
       document.getElementById('processing').style.visibility = "hidden";
       document.getElementById('send_button').removeAttribute("disabled");
   }
}
// ロード完了後の処理
$(function() {
   // トースト通知の位置指定
   toastr.options.positionClass = "toast-bottom-left";
   // バリデーションチェック有効化
   $('#myForm').validator();
   // 処理中アイコン非表示
   processing(false);
   // セレクトボックスのリストを動的に取得する
   getSelectList();   
   // submit時のイベント登録
   $('#myForm').validator().on('submit', function(e) {
       if (document.getElementById('send_button').className.indexOf("disabled") != -1) {
           // submit用のボタンのスタイルにdisabledが設定されていればバリデーションエラー
       } else {
           // バリデーションエラーでなければ送信
           sendData();
       }
   })
});
</script>
```
【stylesheet.html】
```ここに言語を入力
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css">
<!-- 以下を追記 -->
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<!-- ここまで -->
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る