สร้าง DataTables ที่มีช่องค้นหาด้วยเสียง

bysemicon -
0

 


1. สร้างตาราง "Data"

ชื่อตำแหน่งสำนักงานอายุวันที่เริ่มงาน
วิเชียรฝ่ายบุคคลขอนแก่น382018/07/30
ศิริพรฝ่ายขายกรุงเทพฯ292020/11/10
สมชายผู้จัดการกรุงเทพฯ452012/01/25
สมหญิงนักบัญชีเชียงใหม่322015/03/15


2. เว็บแอป

โค้ด พร้อมใช้ใน Google Apps Script (มีทั้ง Code.gs และ index.html)

โดยเมื่อเปิดเว็บแอป:

  • จะแสดงตารางข้อมูลจากชีตชื่อ “Data”
  • สามารถ “พิมพ์ค้นหา” หรือ “พูดค้นหา” ได้
  • รองรับภาษาไทยเต็มรูปแบบ

3. โครงสร้างโปรเจกต์

📁 Google Apps Script Project
├── Code.gs
└── index.html

4. Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('ค้นหาข้อมูลด้วยเสียงหรือพิมพ์')
    .setFaviconUrl('https://ssl.gstatic.com/docs/script/images/logo.png');
}

function getAllData() {
  const ss = SpreadsheetApp.openById('YOUR_SPREADSHEET_ID_HERE'); // 👉 ใส่ ID ของชีต
  const sh = ss.getSheetByName('Data');
  const data = sh.getDataRange().getDisplayValues();
  const headers = data.shift(); // ตัดหัวตารางออก

  return { headers, data };
}

🔧 อย่าลืมแก้ YOUR_SPREADSHEET_ID_HERE ให้เป็น ID ของชีตคุณ
เช่นถ้า URL คือ
https://docs.google.com/spreadsheets/d/1ABCDefgHIjklMNopQRstuVWxyz1234567/edit
ให้ใส่เฉพาะ

1ABCDefgHIjklMNopQRstuVWxyz1234567

5. index.html

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>DataTables ค้นหาด้วยเสียง</title>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
  <style>
    body {
      font-family: "Prompt", sans-serif;
      margin: 30px;
    }
    .mic-btn {
      background: #f8f9fa;
      border: 1px solid #ccc;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-left: 5px;
    }
    .mic-on {
      background: #ffe5e5;
    }
    .dataTables_filter {
      display: flex;
      align-items: center;
      gap: 5px;
    }
  </style>
</head>
<body>
  <h2>🔍 ตารางค้นหาข้อมูลด้วยเสียงหรือพิมพ์</h2>

  <table id="example" class="display" style="width:100%">
    <thead><tr id="table-head"></tr></thead>
    <tbody id="table-body"></tbody>
  </table>

  <script>
    // โหลดข้อมูลจาก Google Sheets
    google.script.run.withSuccessHandler(renderTable).getAllData();

    function renderTable(res) {
      if (!res || !res.data) return alert("ไม่พบข้อมูลจากชีต");

      const headers = res.headers;
      const data = res.data;

      // ✅ สร้างหัวตาราง
      $("#table-head").html(headers.map(h => `<th>${h}</th>`).join(""));

      // ✅ เติมข้อมูลลงตาราง
      const rows = data.map(r => `<tr>${r.map(c => `<td>${c}</td>`).join("")}</tr>`);
      $("#table-body").html(rows.join(""));

      // ✅ เรียก DataTable
      const table = $('#example').DataTable({
        language: {
          search: "🔍 ค้นหา:",
          zeroRecords: "ไม่พบข้อมูลที่ค้นหา",
          info: "แสดง _START_ ถึง _END_ จากทั้งหมด _TOTAL_ รายการ",
          paginate: {
            first: "หน้าแรก", last: "หน้าสุดท้าย",
            next: "ถัดไป", previous: "ก่อนหน้า"
          }
        }
      });

      // ✅ เพิ่มปุ่มไมค์ข้างช่องค้นหา
      const filterDiv = $('#example_filter');
      const micBtn = $('<button class="mic-btn" title="ค้นหาด้วยเสียง">🎤</button>');
      filterDiv.append(micBtn);

      let recognition;
      let listening = false;

      if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
        recognition = new SpeechRecognition();
        recognition.lang = 'th-TH';
        recognition.interimResults = false;

        recognition.onstart = () => {
          listening = true;
          micBtn.addClass('mic-on').text('🎙️');
        };
        recognition.onend = () => {
          listening = false;
          micBtn.removeClass('mic-on').text('🎤');
        };
        recognition.onerror = e => {
          console.error("SpeechRecognition error:", e);
          if (e.error === 'not-allowed') {
            alert('❌ กรุณาอนุญาตการเข้าถึงไมโครโฟนเพื่อใช้ค้นหาด้วยเสียง');
          }
          micBtn.removeClass('mic-on').text('🎤');
        };
        recognition.onresult = e => {
          const text = e.results[0][0].transcript;
          const searchBox = $('#example_filter input');
          searchBox.val(text);
          table.search(text).draw();
        };

        micBtn.on('click', () => {
          if (listening) recognition.stop();
          else recognition.start();
        });
      } else {
        micBtn.prop('disabled', true).attr('title', 'เบราว์เซอร์ไม่รองรับการสั่งเสียง');
      }
    }
  </script>
</body>
</html>

6. การใช้งาน

  • สร้าง Google Sheet ชื่อ “Data” พร้อมข้อมูลที่คุณมี
  • สร้าง Google Apps Script → วาง Code.gs และ index.html
  • แก้ Spreadsheet ID ใน Code.gs
  • ไปที่ Deploy → New deployment → Web app
    • Execute as: Me (เจ้าของสคริปต์)
    • Who has access: Anyone with the link
  • เปิดลิงก์ที่ได้ → จะเห็นตารางพร้อมฟังก์ชันค้นหาด้วยเสียง 🎤







Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า