Web Search

มีนาคม 12, 2565

0

Username : name Pass : 1234

{fullWidth} Bootstrap Accordion with Plus Minus Icon

function doGet(e) {
  
  return HtmlService.createTemplateFromFile("index").evaluate()
  .setTitle("WebApp: Search By Password")
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}


/* PROCESS FORM */
function processForm(formObject){ 
  var concat = formObject.searchtext.toString().toLowerCase()+formObject.searchtext2;
  var result = "";
  if(concat){//Execute if form passes search text
      result = search(concat);
  }
  return result;
}

//SEARCH FOR MATCHED CONTENTS ;
function search(searchtext){
  var spreadsheetId   = 'xxx'; //** CHANGE !!!!
  var sheetName = "xxx" //** CHANGE !!!!
  var range = SpreadsheetApp.openById(spreadsheetId).getSheetByName(sheetName).getDataRange();
  var data = range.getValues();
  var ar = [];
  
  data.forEach(function(f) {
    if (~[f[1].toString().toLowerCase()+f[0]].indexOf(searchtext)) {
      ar.push([ f[2],f[3], ['<a target="_blank" href=' + f[4]+ '>' + f[5] + '</a> <a target="_blank" href=' + f[6]+ '>' + f[7] + '</a>'] , "<img src=" + f[8] + " width=" +f[9] ]);
    }
  });
                                           
  return ar;
};

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <!-- Font-awesome-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap" rel="stylesheet">
  <style>
    /* h5 {background: red;} */
    .frame {
      border: 2px solid;
    }

    body {
      font-family: 'Prompt', sans-serif;
    }

    a {
    color: #000;
    text-decoration: none;
}
  </style>


</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-6 col-md-6 mx-auto  p-3 mt-2 bg-body border rounded">

        <!-- ## SEARCH FORM ------------------------------------------------ -->
        <form id="search-form" onsubmit="handleFormSubmit(this)">
          <div class="mb-3">
            <input type="text" style="text-align: center;" class="form-control col-sm-6" id="searchtext" name="searchtext" placeholder="Username"><br>
            <input type="password" style="text-align: center;" class="form-control col-sm-6" id="searchtext2" name="searchtext2" placeholder="Password">
          </div>
          <div class="mt-3 text-center">
   <button  type="submit" class="btn bg-primary mb-2  text-white btnSubmit"><i class="fas fa-search"></i> Search</button>
                  <button class="btn bg-primary  text-white  btnLoading d-none" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
            <div class="mt-2 text-center">
              <span id="resp-spinner5" class="spinner-grow spinner-grow-sm text-danger d-none" role="status" aria-hidden="true"></span>
              <span id="resp-spinner6" class="spinner-grow spinner-grow-sm text-warning d-none" role="status" aria-hidden="true"></span>
              <span id="resp-spinner7" class="spinner-grow spinner-grow-sm text-info d-none" role="status" aria-hidden="true"></span>
            </div>
        </form>
      </div>
    </div>
  </div>
  <div id="table" style="display:none">
 <table id="search-results" class="display responsive nowrap" style="width:100%"></table>
</div>
  <div class="container text-center">
    <footer class="pt-3 mt-3 text-muted ">
      <div class="footer-copyright py-2 mt-2"> @ <a style="color:red" href="https://examblog64.blogspot.com" target="_blank">  Examblog</a> ©  
        <script>document.write(new Date().getFullYear())</script> 
        <a style="color:blue" href="https://www.youtube.com/watch?v=4BmgVzpctCM" target="_blank">Source Code by Consulthink Programmer</a>
      </div>
    </footer>
    </div>

  <!--##JAVASCRIPT FUNCTIONS ---------------------------------------------------- -->
  <script>
    //PREVENT FORMS FROM SUBMITTING / PREVENT DEFAULT BEHAVIOUR
          function preventFormSubmit() {
            var forms = document.querySelectorAll('form');
            for (var i = 0; i < forms.length; i++) {
              forms[i].addEventListener('submit', function(event) {
              event.preventDefault();
             
              });
            }
          }
          window.addEventListener("load", preventFormSubmit, true); 
             
          
          //HANDLE FORM SUBMISSION
          function handleFormSubmit(formObject) {


           if(document.getElementById('searchtext').value == "" || document.getElementById('searchtext2').value == ""){

              Swal.fire({
                position: 'top',
                icon: 'warning',
                title: 'Enter your username and password.',
                showConfirmButton: false,
                timer: 1500
              }) 
              document.getElementById("table").style.display= "none"; 

           }else{
             document.getElementById('resp-spinner5').classList.remove("d-none");
             document.getElementById('resp-spinner6').classList.remove("d-none");
             document.getElementById('resp-spinner7').classList.remove("d-none");
             document.querySelector('.btnSubmit').classList.toggle('d-none');
             document.querySelector('.btnLoading').classList.toggle('d-none');  
            google.script.run.withSuccessHandler(createTable).processForm(formObject);
            document.getElementById("search-form").reset();
            document.getElementById("table").style.display= "block"; 

           };
          };
        
          //CREATE THE DATA TABLE
          function createTable(dataArray) {
             document.getElementById('resp-spinner5').classList.add("d-none");
             document.getElementById('resp-spinner6').classList.add("d-none");
             document.getElementById('resp-spinner7').classList.add("d-none");
             document.querySelector('.btnSubmit').classList.toggle('d-none');
             document.querySelector('.btnLoading').classList.toggle('d-none');   
             
            if(dataArray && dataArray !== undefined && dataArray.length != 0){
              var result = "<table class='table table-sm table-striped' id='dtable' style='font-size:0.8em'>"+
                           "<thead style='white-space: nowrap'>"+
                             "<tr>"+  //Change table headings to match with the Google Sheet
                              "<th scope='col'>Name</th>"+
                              "<th scope='col'>Gender</th>"+
                              "<th scope='col'>Link</th>"+
                              "<th scope='col'>Image</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;
              $(document).ready(function() {
             $('#search-results').DataTable({

               destroy: true,

             });
              } );
            }else{

                Swal.fire({
                position: 'top',
                icon: 'error',
                title: 'Data not found',
                showConfirmButton: false,
                timer: 1500
              }) 
          document.getElementById("table").style.display= "none"; 
            }
          }
  </script>
  <!--##JAVASCRIPT FUNCTIONS ~ END ---------------------------------------------------- -->
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
    integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
    integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous">
  </script>

</body>

</html>

ติดต่อสอบถามปัญหาได้เลยครับ

แสดงความคิดเห็น (0)

Web Search

Username : name Pass : 1234

Code.gs

index.html

Credit Consulthink Programmer

ฟอร์มรายชื่อติดต่อ