Webapp Datalist autocomplete

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
}

Webapp Datalist autocomplete

index.html

code.gs

2 ความคิดเห็น

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