neno-tech/code.gs

## code.gs
function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate();
}

function processForm(formObject){
  var result = "";
  if(formObject.searchtext){
      result = search(formObject.searchtext);
  }
  return result;
}

function search(searchtext){
  var spreadsheetId = 'xxx';
  var dataRage  = 'แผ่น1!A2:D';
  var data = Sheets.Spreadsheets.Values.get(spreadsheetId, dataRage).values;
  var ar = [];

  data.forEach(function(f) {
    if (~f.indexOf(searchtext)) {
      ar.push(f);
    }
  });
  return ar;
}

## index.html
<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Mitr">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
    <!-- Font Awesome CSS -->
    <script src="https://kit.fontawesome.com/6a972cf3a7.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
body {
  font-family: "Mitr"
}
</style>
    </head>
    <body>
        <div class="container">
            <br>
            <div class="row">
              <div class="col ">

             <div class="row">
              <div class="col-md-4 mx-auto">
             <div class="card text-center">
             <div class="card-header">
             ระบบค้นหาข้อมูล
             </div>
             <div class="card-body">
                  <!-- ## ฟอร์มค้นหา------------------------------------------------ -->
                  <form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
                    <div class="form-group mb-2">
                      <label for="searchtext">กรุณากรอกข้อมูลที่ต้องการค้นหา</label>
                    </div>
                    <div class="form-group mx-sm-3 mb-2">
                      <input type="text" class="form-control" id="searchtext" name="searchtext" placeholder="พิมพ์ที่นี่">
                    </div>
                    <button type="submit" class="btn btn-primary mb-2">ค้นหา</button>
                  </form>
                  <!-- ## ปิดฟอร์ม ------------------------------------------- -->
                  </div>
                  </div>
                  </div>
                  </div>
              </div>
            </div>
            <div class="row">
              <div class="col">

                <!-- ## สร้างตาราง ------------------------------------------------ -->
                <div id="search-results" class="table-responsive">
                  <!-- แสดงข้อมูลที่นี่ -->
                </div>
                <!-- ## จบตาราง ------------------------------------------------ -->

              </div>
            </div>
        </div>
        <!--##JAVASCRIPT ---------------------------------------------------- -->
        <script>

          window.addEventListener("load", preventFormSubmit, true);

          function preventFormSubmit() {
            var forms = document.querySelectorAll('form');
            for (var i = 0; i < forms.length; i++) {
              forms[i].addEventListener('submit', function(event) {
              event.preventDefault();
              });
            }
          }

           //ทำการส่งค่าจากฟอร์ม
          function handleFormSubmit(formObject) {
            google.script.run.withSuccessHandler(createTable).processForm(formObject);
            document.getElementById("search-form").reset();
          }

          //สร้างตารางและข้อมูลในตาราง
          function createTable(dataArray) {
            if(dataArray && dataArray !== undefined && dataArray.length != 0){
              var result = "<table class='table table-sm table-striped table-hover' id='dtable'>"+
                           "<thead style='white-space: nowrap'>"+
                             "<tr>"+
                              "<th scope='col'>เลขที่"+
                              "<th scope='col'>ชื่อ สกุล</th>"+
                              "<th scope='col'>ชื่อเล่น</th>"+
                              "<th scope='col'>เบอร์โทร</th>"+

                            "</tr>"+
                          "</thead>";
              for(var i=0; i<dataArray.length; i++) {
                  result += "<tr>";
                  for(var j=0; j<dataArray[i].length; j++){
                      result += "<td>"+dataArray[i][j]+"</td>";
                  }
                  result += "</tr>";
              }
              result += "</table>";
              var div = document.getElementById('search-results');
              div.innerHTML = result;
            }else{
              var div = document.getElementById('search-results');
              //div.empty()
              div.innerHTML = "ไมพบข้อมูลที่ค้นหา!";
            }
          }
        </script>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

    </body>
</html>
	function doGet() {
	return HtmlService.createTemplateFromFile('index').evaluate();
	}

	function processForm(formObject){
	var result = "";
	if(formObject.searchtext){
	result = search(formObject.searchtext);
	}
	return result;
	}

	function search(searchtext){
	var spreadsheetId = 'xxx';
	var dataRage = 'แผ่น1!A2:D';
	var data = Sheets.Spreadsheets.Values.get(spreadsheetId, dataRage).values;
	var ar = [];

	data.forEach(function(f) {
	if (~f.indexOf(searchtext)) {
	ar.push(f);
	}
	});
	return ar;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<base target="_top">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Mitr">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
	<!-- Font Awesome CSS -->
	<script src="https://kit.fontawesome.com/6a972cf3a7.js" crossorigin="anonymous"></script>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
	<style>
	body {
	font-family: "Mitr"
	}
	</style>
	</head>
	<body>
	<div class="container">
	<br>
	<div class="row">
	<div class="col ">

	<div class="row">
	<div class="col-md-4 mx-auto">
	<div class="card text-center">
	<div class="card-header">
	ระบบค้นหาข้อมูล
	</div>
	<div class="card-body">
	<!-- ## ฟอร์มค้นหา------------------------------------------------ -->
	<form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
	<div class="form-group mb-2">
	<label for="searchtext">กรุณากรอกข้อมูลที่ต้องการค้นหา</label>
	</div>
	<div class="form-group mx-sm-3 mb-2">
	<input type="text" class="form-control" id="searchtext" name="searchtext" placeholder="พิมพ์ที่นี่">
	</div>
	<button type="submit" class="btn btn-primary mb-2">ค้นหา</button>
	</form>
	<!-- ## ปิดฟอร์ม ------------------------------------------- -->
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="row">
	<div class="col">

	<!-- ## สร้างตาราง ------------------------------------------------ -->
	<div id="search-results" class="table-responsive">
	<!-- แสดงข้อมูลที่นี่ -->
	</div>
	<!-- ## จบตาราง ------------------------------------------------ -->

	</div>
	</div>
	</div>
	<!--##JAVASCRIPT ---------------------------------------------------- -->
	<script>

	window.addEventListener("load", preventFormSubmit, true);

	function preventFormSubmit() {
	var forms = document.querySelectorAll('form');
	for (var i = 0; i < forms.length; i++) {
	forms[i].addEventListener('submit', function(event) {
	event.preventDefault();
	});
	}
	}

	//ทำการส่งค่าจากฟอร์ม
	function handleFormSubmit(formObject) {
	google.script.run.withSuccessHandler(createTable).processForm(formObject);
	document.getElementById("search-form").reset();
	}

	//สร้างตารางและข้อมูลในตาราง
	function createTable(dataArray) {
	if(dataArray && dataArray !== undefined && dataArray.length != 0){
	var result = "<table class='table table-sm table-striped table-hover' id='dtable'>"+
	"<thead style='white-space: nowrap'>"+
	"<tr>"+
	"<th scope='col'>เลขที่"+
	"<th scope='col'>ชื่อ สกุล</th>"+
	"<th scope='col'>ชื่อเล่น</th>"+
	"<th scope='col'>เบอร์โทร</th>"+

	"</tr>"+
	"</thead>";
	for(var i=0; i<dataArray.length; i++) {
	result += "<tr>";
	for(var j=0; j<dataArray[i].length; j++){
	result += "<td>"+dataArray[i][j]+"</td>";
	}
	result += "</tr>";
	}
	result += "</table>";
	var div = document.getElementById('search-results');
	div.innerHTML = result;
	}else{
	var div = document.getElementById('search-results');
	//div.empty()
	div.innerHTML = "ไมพบข้อมูลที่ค้นหา!";
	}
	}
	</script>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

	</body>
	</html>