วิธีสร้างกล่องค้นหาเต็มจอ (Full Screen Search Box) ด้วย CSS และ JavaScript

ตัวอย่างโค้ด

สร้างกล่องค้นหาที่เมื่อคลิกปุ่มจะขยายเต็มจอภาพ (Overlay) พร้อมแอนิเมชันและปุ่มปิด

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Fullscreen Search</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    * { box-sizing: border-box; }

    .showBtn {
      background: #008b0c;
      border: none;
      color: white;
      padding: 12px 20px;
      font-size: 18px;
      cursor: pointer;
      opacity: 0.8;
      border-radius: 4px;
      transition: opacity 0.2s;
    }
    .showBtn:hover { opacity: 1; }

    .overlaySearch {
      height: 100vh;
      width: 100%;
      display: none;
      position: fixed;
      z-index: 9999;
      top: 0;
      left: 0;
      background-color: rgba(132, 150, 155, 0.9);
      animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .searchBar {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      width: 80%;
      max-width: 600px;
      margin: 0 auto;
      text-align: center;
    }

    .overlaySearch .hideBtn {
      position: absolute;
      top: 20px;
      right: 40px;
      font-size: 48px;
      cursor: pointer;
      color: #ff3333;
      opacity: 0.8;
      transition: opacity 0.2s, transform 0.2s;
      line-height: 1;
    }
    .overlaySearch .hideBtn:hover {
      opacity: 1;
      transform: rotate(90deg);
    }

    .overlaySearch input[type="text"] {
      padding: 18px;
      font-size: 20px;
      border: none;
      width: 70%;
      background: white;
      border-radius: 4px 0 0 4px;
      outline: none;
    }
    .overlaySearch input[type="text"]:focus {
      box-shadow: 0 0 0 3px rgba(0,139,12,0.3);
    }

    .overlaySearch button[type="submit"] {
      padding: 18px;
      width: 30%;
      background: #008b0c;
      font-size: 20px;
      border: none;
      color: white;
      cursor: pointer;
      opacity: 0.8;
      border-radius: 0 4px 4px 0;
      transition: opacity 0.2s;
    }
    .overlaySearch button:hover { opacity: 1; }
  </style>
</head>
<body>
  <div class="overlaySearch">
    <span class="hideBtn" aria-label="ปิดการค้นหา">×</span>
    <div class="searchBar">
      <form role="search">
        <input type="text" placeholder="ค้นหาที่นี่..." autocomplete="off" />
        <button type="submit"><i class="fa fa-search"></i></button>
      </form>
    </div>
  </div>

  <h1>ตัวอย่าง Fullscreen Search</h1>
  <button class="showBtn">เปิดกล่องค้นหาเต็มจอ</button>
  <p>คลิกปุ่มด้านบนเพื่อทดสอบ</p>

  <script>
    const overlay = document.querySelector('.overlaySearch');
    const showBtn = document.querySelector('.showBtn');
    const hideBtn = document.querySelector('.hideBtn');
    const searchInput = document.querySelector('.overlaySearch input[type="text"]');

    function showSearch() {
      overlay.style.display = 'flex';
      overlay.style.alignItems = 'center';
      overlay.style.justifyContent = 'center';
      searchInput.focus(); // โฟกัสอัตโนมัติ
    }

    function hideSearch() {
      overlay.style.display = 'none';
      searchInput.value = ''; // ล้างค่า
    }

    showBtn.addEventListener('click', showSearch);
    hideBtn.addEventListener('click', hideSearch);

    // ปิดด้วย Escape key
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && overlay.style.display !== 'none') {
        hideSearch();
      }
    });

    // ปิดเมื่อคลิกนอกพื้นที่ค้นหา
    overlay.addEventListener('click', (e) => {
      if (e.target === overlay) hideSearch();
    });
  </script>
</body>
</html>

การทำงาน

• คลิก "เปิดกล่องค้นหาเต็มจอ" → Overlay แสดงเต็มจอพร้อม fade-in animation
• Input ได้รับ focus อัตโนมัติ พร้อมพิมพ์ได้ทันที
• คลิก × หรือกด Escape หรือคลิกนอกพื้นที่ → ปิดและล้างค่า

จุดสำคัญของการปรับปรุงจากต้นฉบับ

• ใช้ display: flex + align-items: center จัดกึ่งกลางแนวตั้งแทน top: 46%
• เพิ่ม animation และ transition ทำให้ดูทันสมัย
• รองรับ Accessibility: aria-label, role="search", keyboard navigation
• ใช้ Font Awesome 6 (CDN ใหม่กว่า)
• เพิ่ม max-width และ responsive design
• ล้างค่าอินพุตเมื่อปิด

แนวทางขยายต่อ

• เพิ่ม live search / autocomplete ด้วย AJAX
• เพิ่ม filter tabs (ทั้งหมด, บทความ, สินค้า, ผู้ใช้)
• เก็บประวัติการค้นหาล่าสุดใน localStorage
• เพิ่ม voice search ด้วย Web Speech API