セレクトボックス（動的）に検索機能をつけたい

前提・実現したいこと

ＧＡＳで動的なセレクトボックスを作成しました。
セレクトボックスの内容はスプレッドシート内より取得表示しましたが
そのボックス内に検索機能をつけたいです。
（例）セレクトと入力、両方ができてボックス内にて入力すると、該当するものを表示・選択状態

該当のソースコード

【コード.gs】

function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setTitle('gas入力フォームサンプル');
}

function registerSSByFormData(data) {
  var datasheet = SpreadsheetApp.getActive().getSheetByName('シート1');
  var now = new Date();

  var i = datasheet.getLastRow() + 1; 
  datasheet.getRange(i, 1).setValue(data[11]);
  datasheet.getRange(i, 2).setValue(Utilities.formatDate(now, 'Asia/Tokyo', 'yyyy/MM/dd HH:mm:ss'));
  result = true;

  return {data: true};
}

function getSelectListFromMasterSS() {
  var SelectList = [];

  // マスタデータシートを取得
  var datasheet = SpreadsheetApp.getActive().getSheetByName('マスタ');
  // B列2行目のデータからB列の最終行までを取得 
  var lastRow = datasheet.getRange("A:A").getValues().filter(String).length - 1;
  //Logger.log("lastRow = %s", lastRow);
  // B列2行目のデータからB列の最終行までを1列だけ取得 
  selectList = datasheet.getRange(2, 1, lastRow, 1).getValues();
  //Logger.log("selectList = %s", selectList); 
  return {data: selectList};
}

【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>
/**
 コード.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);

                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>

【index.html】

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <?!= HtmlService.createHtmlOutputFromFile('stylesheet').getContent(); ?>
</head>
<body>

  <nav class="navbar navbar-inverse">
    <div class="navbar-header"><a class="navbar-brand" href="#">入力フォーム</a></div>
  </nav>

<div class="container">
    <form class="form-horizontal" id="myForm" name="myForm" onsubmit="return false;">
        <div class="form-group">
            <label class="control-label col-xs-3">セレクトボックス(動的）</label>
            <div class="col-xs-9">
                <select class="form-control" id="select_id3" name="select_id3" onchange="outputSelectedValueAndText(this);"></select>
                <div class="help-block with-errors"></div>
            </div>
        </div>
<div id="shopName">未選択</div>
        <div class="form-group">
            <div class="col-xs-offset-3 col-xs-9">
                <button id="send_button" type="submit" class="btn btn-primary btn-large">
                  <i class="fa fa-send fa-lg"></i>送信
                </button>
            </div>
        </div>
    </form>
<i id="processing" class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
</div>
<?!= HtmlService.createHtmlOutputFromFile('javascript').getContent(); ?>
</body>
</html>

試したこと

①【index.html】のselect class="form-control"をselect class="chosen-select"に変更しましたが、枠の形式が変わっただけで検索機能はつきませんでした。
※参照元①

②検索機能のSelect2を参照しましたが、挿入の仕方がわからなかったです。（試行錯誤はしましたが、検索機能はつかなかったです。）
※参照元②

おそらく【index.html】内ではなく
【javascript.html】内のgetSelectList()イベント内で設定するものかと思いますが
設定の仕方がわからず今回質問させていただきました。

ご教示いただけますと助かります。

宜しくお願いします。

行動規範の内容に同意します

回答1件

自己解決

更に調べていきましていろいろ試しましたところ、自己解決しましたので
ご報告させていただきます。

下記サイトを参考・更に読み進めていきまして、セレクトボックス（検索機能）を
【javascript.html】getSelectList()イベント内に生成させていただきました。
※リンク元　select2の使い方

あと、投稿時に【stylesheet.html】を記述するのを忘れていましたが
その中にも検索機能がついているスタイルの記述を追記しました。

【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" />
<!-- ここまで -->

投稿2018/05/22 01:00

編集2018/05/22 01:02

whitedoragon

総合スコア12