質問編集履歴

3 質問修正

whitedoragon

whitedoragon score 4

2018/05/21 23:39  投稿

セレクトボックス(動的)に検索機能をつけたい
### 前提・実現したいこと
そのボックス内に検索機能をつけたいです。
(例)セレクトと入力、両方ができてボックス内にて入力すると、該当するものを表示・選択状態
### 該当のソースコード
【コード.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"に変更しましたが、枠の形式が変わっただけで検索機能はつきませんでした。
[※参照元①](http://dev.blog.fairway.ne.jp/jquery%E6%A4%9C%E7%B4%A2%E6%A9%9F%E8%83%BD%E4%BB%98%E3%81%8D%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC/)
②検索機能のSelect2を参照しましたが、挿入の仕方がわからなかったです。(試行錯誤はしましたが、検索機能はつかなかったです。)
[※参照元②](https://iritec.jp/web_service/11240/)
おそらく【index.html】内ではなく
【javascript.html】内のgetSelectList()イベント内で設定するものかと思いますが
設定の仕方がわからず今回質問させていただきました。
ご教示いただけますと助かります。
宜しくお願いします。
  • JavaScript

    20863 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11803 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Google Apps Script

    1318 questions

    Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

2 タイトルの変更

whitedoragon

whitedoragon score 4

2018/05/21 23:38  投稿

### 前提・実現したいこと
GASで動的なリストボックスを作成しました。
リストボックスの内容はスプレッドシート内より取得表示しましたが
そのボックス内に検索機能をつけたいです。
(例)セレクトと入力、両方ができてボックス内にて入力すると、該当するものを表示・選択状態
### 該当のソースコード
【コード.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"に変更しましたが、枠の形式が変わっただけで検索機能はつきませんでした。
[※参照元①](http://dev.blog.fairway.ne.jp/jquery%E6%A4%9C%E7%B4%A2%E6%A9%9F%E8%83%BD%E4%BB%98%E3%81%8D%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC/)
②検索機能のSelect2を参照しましたが、挿入の仕方がわからなかったです。(試行錯誤はしましたが、検索機能はつかなかったです。)
[※参照元②](https://iritec.jp/web_service/11240/)
おそらく【index.html】内ではなく
【javascript.html】内のgetSelectList()イベント内で設定するものかと思いますが
設定の仕方がわからず今回質問させていただきました。
ご教示いただけますと助かります。
宜しくお願いします。
  • JavaScript

    20863 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11803 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Google Apps Script

    1318 questions

    Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

1 初心者マークの追加

whitedoragon

whitedoragon score 4

2018/05/21 23:17  投稿

リストボックス(動的)に検索機能をつけたい
### 前提・実現したいこと
GASで動的なリストボックスを作成しました。
リストボックスの内容はスプレッドシート内より取得表示しましたが
そのボックス内に検索機能をつけたいです。
(例)セレクトと入力、両方ができてボックス内にて入力すると、該当するものを表示・選択状態
### 該当のソースコード
【コード.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"に変更しましたが、枠の形式が変わっただけで検索機能はつきませんでした。
[※参照元①](http://dev.blog.fairway.ne.jp/jquery%E6%A4%9C%E7%B4%A2%E6%A9%9F%E8%83%BD%E4%BB%98%E3%81%8D%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC/)
②検索機能のSelect2を参照しましたが、挿入の仕方がわからなかったです。(試行錯誤はしましたが、検索機能はつかなかったです。)
[※参照元②](https://iritec.jp/web_service/11240/)
おそらく【index.html】内ではなく
【javascript.html】内のgetSelectList()イベント内で設定するものかと思いますが
設定の仕方がわからず今回質問させていただきました。
ご教示いただけますと助かります。
宜しくお願いします。
  • JavaScript

    20863 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11803 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Google Apps Script

    1318 questions

    Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

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