ข้อมูลตัวอย่าง
/**Credit https://www.youtube.com/watch?v=XOyjhRiO7RQ */
/**Dev https://examblog64.krooluang.com/ */
function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function searchForm(record){
var ss = SpreadsheetApp.getActive().getSheets()[0];
var data = ss.getDataRange().getValues()
var id = data.map(r => r[0])
var index = id.indexOf(record)
var output = {}
if(index > -1){
data = ss.getRange(index+1,1,1,ss.getLastColumn()).getValues()[0]
output.result = true
output.data = data
}else{
output.result = false
}
return output
}
//===========//
index.html
<!DOCTYPE html>
<html>
<head>
<title>Expanding Search Box</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<?!= HtmlService.createHtmlOutputFromFile('css').getContent() ?>
</head>
<body>
<div class="wrapper">
<div class="search-box">
<input type="text" placeholder="พิมพ์เลขประจำตัวนักเรียน" id="id" minlength="4" maxlength="4" class="input">
<div class="btn">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
<div class="message">
<b id="message"></b>
<table id="tb" style="width:100%"></table>
</div>
</div>
<?!= HtmlService.createHtmlOutputFromFile('js').getContent() ?>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</body>
</html>
//===========//
js.html
<script>
$(".btn").click(function(){
event.preventDefault()
if(document.getElementById('id').value == "" ){
$(".input").toggleClass("active").focus;
$(this).toggleClass("animate");
$(".input").val("");
document.getElementById('tb').innerHTML = "";
}else{
document.getElementById("message").innerHTML = "กรุณารอสักครู่..";
var record = document.getElementById('id').value
google.script.run.withSuccessHandler(success).searchForm(record)
document.getElementById('tb').innerHTML = "";
}
});
function success(output){
if(output.result == true){
document.getElementById('id').value = '';
document.getElementById("message").innerHTML = '';
var div = document.createElement('div')
div.setAttribute('id','tb')
document.body.appendChild(div)
document.getElementById('tb').innerHTML =
`<table>
<tr>
<th colspan="2" class="detail">รายละเอียด</th>
</tr>
<tr>
<th scope='col'>เลขประจำตัว</th>
<td scope='col'>${output.data[0]}</td>
</tr>
<tr>
<th scope='col'>ชื่อ สกุล</th>
<td scope='col'>${output.data[1]}</td>
</tr>
<tr>
<th scope='col'>ชั้น</th>
<td scope='col'>${output.data[2]}</td>
</tr>
<tr>
<th scope='col'>ห้อง</th>
<td scope='col'>${output.data[3]}</td>
</tr>
</table>`
}else{
document.getElementById("message").innerHTML = "ไม่พบข้อมูล !";
setTimeout(function(){
document.getElementById('message').innerHTML= ""; }, 1500);
document.getElementById('tb').innerHTML = '';
}
}
</script>
//===========//
css.html
<style>
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap');
* {
margin: 0;
padding: 0;
user-select: none;
font-family: 'Prompt', sans-serif;
}
body {
background: #fafafa;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.search-box {
width: 350px;
height: 90px;
position: relative;
}
.input {
position: absolute;
top: 20px;
right: 50px;
box-sizing: border-box;
width: 0px;
height: 63px;
padding: 0 20px;
outline: none;
font-size: 16px;
border-radius: 50px;
color: #0d6efd;
border: 3px solid #0d6efd;
transition: all 0.8s ease;
}
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #0d6efd;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #0d6efd;
}
:-ms-input-placeholder {
/* IE 10+ */
color: #0d6efd;
}
:-moz-placeholder {
/* Firefox 18- */
color: #0d6efd;
}
.btn {
position: absolute;
width: 80px;
height: 80px;
background: #0d6efd;
border-radius: 50%;
right: 45px;
top: 10px;
cursor: pointer;
text-align: center;
line-height: 80px;
font-size: 16px;
color: #fff;
transition: all 0.8s ease;
}
.input.active {
width: 350px;
right: 5px;
}
.btn.animate {
transform: rotate(-360deg);
right: 5px;
}
table {
border-collapse: collapse;
width: 100%;
margin-top:15px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #e5e5e5;
}
.detail{
text-align:center;
background-color:#0d6efd;
color:#fff;
}
.message{
text-align:center;
color:#0d6efd;
font-size: 16px;
}
{fullWidth}
