input要素とdatalistで入力候補を用意して
リストにない値のときはアラートを出したい
ということを実現するコードを書きました。
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<body>
<div id="main">
<input type="text" id="input_text" list="data_list">
<datalist id="data_list">
<option>あめ</option>
<option>ちょこ</option>
<option>がむ</option>
</datalist>
</div>
<script>
document.getElementById('input_text').onchange = checkDataList;
function checkDataList() {
var dataList = document.getElementById('data_list');
var inputValue = document.getElementById('input_text').value;
var array = [];
for(var i = 0; i < dataList.options.length; i++) {
var value = dataList.options[i].value;
array.push(value);
}
if(array.indexOf(inputValue) === -1) {
alert("リストの中から選択してください");
document.getElementById('input_text').focus();
}
}
</script>
</body>
</html>
|
index.htmlのscript内でやっていること
input_textの値が変わった時にcheckDataListを実行する
- document.getElementById('input_text').onchange = checkDataList;
checkDataListでやることは
- datalistのoptionのvalueを配列に入れて
- その配列と入力された値をindexOfで判定して
- 見つからない場合は-1が返って来るのでアラートを投げる
参考
<datalist>
