index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-title" content="CodePen">
<title>HTML5 datalist autocomplete</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-size: 100%;
color: #222;
background-color: #fafafe;
margin: 1em;
}
label, button {
display: block;
margin-top: 1em;
}
/* <datalist> and <option> styling */
datalist {
position: absolute;
max-height: 20em;
border: 0 none;
overflow-x: hidden;
overflow-y: auto;
}
datalist option {
font-size: 0.8em;
padding: 0.3em 1em;
background-color: #ccc;
cursor: pointer;
}
datalist option:hover, datalist option:focus {
color: #fff;
background-color: #036;
outline: 0 none;
}
</style>
</head>
<body translate="no">
<div class="container">
<h1>Datalist autocomplete</h1>
<form id="autoform" class="row g-3">
<div class="col-md-6">
<label for="country">Country:</label>
<input class="form-control w-100" list="countrydata" id="country" name="country" autocomplete="off" />
<!-- must be first element after input and use <option>value</option> format -->
<datalist id="countrydata">
<?= getCountry().forEach(val =>{ ?>
<option><?= val ?></option>
<? }) ?>
</datalist>
</div>
<div class="col-md-6">
<!-- must be first element after input and use <option>value</option> format -->
<label for="browser">Browser:</label>
<input class="form-control w-100" list="browserdata" id="browser" name="browser" autocomplete="off" />
<datalist id="browserdata">
<option>Brave</option>
<option>Chrome</option>
<option>Edge</option>
<option>Firefox</option>
<option>Internet Explorer</option>
<option>Opera</option>
<option>Safari</option>
<option>Vivaldi</option>
<option>other</option>
</datalist>
</div>
<div class="col-md-12">
<button class="btn btn-success" type="submit">Submit</button>
</div>
</form>
</div>
<script src='https://cdn.jsdelivr.net/npm/datalist-css/dist/datalist-css.min.js'></script>
<script>
(() => {
const form = document.getElementById('autoform');
form.addEventListener('submit', e => {
e.preventDefault();
console.clear();
console.log('Submit disabled. Data:');
const data = new FormData(form);
for (let nv of data.entries()) {
console.log(`${nv[0]}: ${nv[1]}`);
}
});
})();
</script>
</body>
</html>
code.gs
const doGet = () => {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.setTitle('My Project')
.setFaviconUrl('https://semicon.github.io/img/logo2.png')
.addMetaTag('viewport', 'width=device-width , initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
}
const getCountry = () => {
const ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('country');
const data = ss.getDataRange().getDisplayValues().slice(1)
return data
}
ขอบคุณครับผม สำหรับความรู้ดีๆ ที่มาเผยแพร่
ตอบลบผมได้เรียนรู้อะไรหลายๆอย่างจากที่นี่เอาไปใช้ในโรงเรียน ขอบคุณมากๆครับ
ตอบลบ