🔍 ตัวกรองการค้นหาแบบเรียลไทม์

📝 วิธีใช้งาน

หน้านี้มี ฟิลเตอร์ค้นหาข้อความภายในหน้าแบบเรียลไทม์

ตัวอย่างเช่น พิมพ์คำว่า "แอปเปิ้ล" จะพบรายการที่มีคำว่า "แอปเปิ้ล" หรือ "น้ำแอปเปิ้ล" แสดงทันที
รองรับตัวพิมพ์เล็ก-ใหญ่ และการแสดงผลแบบ normalize
สามารถคัดลอกโค้ด HTML ด้านล่างไปใช้ได้อย่างอิสระ

แอปเปิ้ล
กล้วย
ส้มแมนดาริน
องุ่น
แตงโม
สับปะรด
เมล่อน
น้ำแอปเปิ้ล
OpenAI

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>ตัวกรองการค้นหาแบบเรียลไทม์</title>
  <style>
    body { font-family: sans-serif; padding: 2rem; max-width: 600px; margin: auto; }
    input[type="text"] {
      width: 100%; padding: 10px; font-size: 1.1rem; margin-bottom: 1rem;
      border: 1px solid #ccc; border-radius: 5px;
    }
    ul { list-style-type: none; padding: 0; }
    li { padding: 8px; border-bottom: 1px solid #ddd; }
    .hidden { display: none; }
  </style>
</head>
<body>
  <h1>🔍 ตัวกรองการค้นหาแบบเรียลไทม์</h1>
  <input type="text" id="filterInput" placeholder="พิมพ์คำค้น (เช่น แอปเปิ้ล หรือ กล้วย)">

  <ul id="itemList">
    <li>แอปเปิ้ล</li>
    <li>กล้วย</li>
    <li>ส้มแมนดาริน</li>
    <li>องุ่น</li>
    <li>แตงโม</li>
    <li>สับปะรด</li>
    <li>เมล่อน</li>
    <li>น้ำแอปเปิ้ล</li>
    <li>OpenAI</li>
  </ul>

  <script>
    const input = document.getElementById("filterInput");
    const items = document.querySelectorAll("#itemList li");

    input.addEventListener("input", () => {
      const keyword = input.value.trim().toLowerCase().normalize("NFKC");
      items.forEach(item => {
        const text = item.textContent.toLowerCase().normalize("NFKC");
        item.classList.toggle("hidden", !text.includes(keyword));
      });
    });
  </script>
</body>
</html>

🔧 ฟิลเตอร์แบบเรียลไทม์อัจฉริยะ: รองรับความแตกต่างของคำและคำลงท้าย

ฟิลเตอร์แบบเรียลไทม์ทั่วไปมักจะต้องการให้ ตรงกับข้อความแบบเป๊ะๆ ระหว่างสิ่งที่ผู้ใช้พิมพ์และรายการที่มีอยู่
สิ่งนี้อาจทำให้การค้นหาไม่เจอหากมีความแตกต่างเพียงเล็กน้อย เช่น “miru” (見る), “mita” (見た) หรือ “ดู”
ความแตกต่างเล็กๆ เหล่านี้ — ซึ่งเรียกว่า ความคลาดเคลื่อนทางอักขรวิธีหรือคำลงท้าย — อาจส่งผลต่อประสบการณ์ในการค้นหา

เทมเพลตนี้ช่วยแก้ปัญหาได้โดยใช้การแปลง คาตากานะ ⇔ ฮิรางานะ ร่วมกับ:

การปรับให้เป็นรูปแบบเดียวกันของตัวอักษรแบบเต็มและแบบครึ่ง (normalize("NFKC"))
แปลงเป็นตัวพิมพ์เล็ก (.toLowerCase())
จับคู่บางส่วนตามรากของคำ

ด้วยวิธีนี้ หากพิมพ์คำว่า “น้ำมิกัน” ก็จะแสดงผลลัพธ์เช่น “มิกัน” (みかん), “100% มิกัน” หรือ “รสมิกัน” ได้ด้วย
ซึ่งช่วยเพิ่มความแม่นยำและความยืดหยุ่นของการค้นหาได้อย่างมาก

การปรับปรุงลักษณะนี้เหมาะอย่างยิ่งสำหรับ แอปการศึกษา หรือ เครื่องมือค้นหาสินค้า ที่ผู้ใช้อาจพิมพ์ด้วยรูปแบบต่างกัน

นอกจากนี้ยังช่วยพัฒนา ประสบการณ์ผู้ใช้ (UX) และ ส่งเสริมการเข้าถึงสำหรับทุกคน ไม่ว่าจะอยู่ในสถานการณ์หรือมีความสามารถแบบใด