การทำระบบค้นหาและคัดกรองข้อมูลบนเว็บด้วยเครื่องมือ AI อย่าง Claude Code, Codex หรือ Cursor เริ่มได้ตั้งแต่การสั่งให้เขียนระบบกรองข้อมูลบนหน้าเว็บโดยตรงสำหรับข้อมูลจำนวนน้อย ไปจนถึงการเชื่อมต่อ database และการใช้ vector search สำหรับค้นหาตามความหมาย สิ่งสำคัญคือการเลือกวิธีจัดการข้อมูลให้ตรงกับปริมาณข้อมูลและพฤติกรรมการค้นหาของผู้ใช้ตั้งแต่วันแรก หากเรากำหนดโครงสร้างข้อมูลและเงื่อนไขการคัดกรองใน prompt อย่างชัดเจน AI จะช่วยสร้างทั้งช่อง search และตัวกรองหลายเงื่อนไขที่ทำงานประสานกันได้อย่างลื่นไหล
ทำไมระบบค้นหาและคัดกรองข้อมูลถึงเป็นหัวใจของเว็บที่สร้างด้วย AI
เมื่อคนไทยเริ่มสร้างเว็บหรือแอปด้วยตัวเองผ่านการสั่ง AI สิ่งที่ตามมาหลังจากทำหน้าแสดงผลเสร็จคือปริมาณข้อมูลที่เพิ่มขึ้นเรื่อยๆ ไม่ว่าจะเป็นรายการสินค้า บทความ สถานที่ท่องเที่ยว รายชื่อบริษัท หรือข้อมูลผู้สมัครงาน หากหน้าเว็บมีข้อมูลแค่ 10 รายการ ผู้ใช้ยังพอเลื่อนหน้าจอดูทีละบรรทัดได้ แต่เมื่อข้อมูลขยับขึ้นเป็นหลักร้อยหรือหลักพันรายการ เว็บที่ไม่มีระบบ search และ filter ที่ดีจะทำให้ผู้ใช้หาสิ่งที่ต้องการไม่เจอและปิดหน้าเว็บออกไปในที่สุด
จากคลังผลงานบน applnw.com ที่รวบรวมเว็บและแอปฝีมือคนไทยซึ่งสร้างด้วย AI ไว้ถึง 2478 รายการ เราเห็นผลงานจำนวนมากที่ให้ความสำคัญกับการแก้ปัญหาเรื่องการค้นหาและคัดกรองข้อมูลในหลากหลายรูปแบบตามโจทย์ของแต่ละงาน ตัวอย่างเช่น
- E-Book Store Online Management System ระบบจัดการร้านขายหนังสือและ E-Book ทาง web ที่พัฒนาขึ้นเป็นโครงงานด้านวิศวกรรม software โดยที่มาของงานได้หยิบยกปัญหาเรื่องการเข้าถึงเนื้อหาโดยไม่ได้รับอนุญาตและปัญหาการค้นหาของร้านค้าขึ้นมาแก้ไข พัฒนาด้วย Tailwind และ deploy บน Vercel
- VIBEKICKS เว็บไซต์ที่แสดงรองเท้า sneakers และเสื้อผ้า streetwear พร้อมระบบค้นหาและคัดกรองตาม brand อีกทั้งยังเปิดให้ผู้ที่สนใจติดตามวันเปิดตัวและวันวางจำหน่ายผ่านปฏิทินได้ โดยเลือก deploy บน Vercel
- Camp Moo Camp Mee เว็บไซต์ที่ช่วยค้นหาลานกางเต็นท์ ซึ่งเจ้าของระบุว่าผู้ประกอบการอนุญาตให้นำลานทุกแห่งที่แสดงมาลงข้อมูลแล้ว พัฒนาด้วย Next.js และ Tailwind บน Vercel ร่วมกับการใช้ LINE LIFF เป็น backend
ตัวอย่างเหล่านี้สะท้อนให้เห็นว่าไม่ว่าจะเป็นเว็บแสดงสินค้า เว็บรวมสถานที่ หรือระบบจัดการร้านค้า ระบบค้นหาและตัวกรองข้อมูลคือส่วนสำคัญที่เปลี่ยนหน้าเว็บธรรมดาให้กลายเป็นเครื่องมือที่ใช้งานได้จริง
เทียบ 4 วิธีทำระบบ search และ filter บนเว็บที่สร้างด้วย AI
ก่อนจะพิมพ์ prompt สั่งให้ AI เขียน code ระบบค้นหา เราควรทำความเข้าใจก่อนว่าการทำ search และ filter บนเว็บแบ่งออกได้เป็น 4 แนวทางหลักตามขนาดของข้อมูลและระดับความซับซ้อนของการค้นหา ดังตารางเปรียบเทียบต่อไปนี้
| รูปแบบการค้นหา | ปริมาณข้อมูลที่เหมาะ | ตำแหน่งที่ประมวลผล | จุดเด่นของระบบ | ข้อควรระวังในการใช้งาน |
|---|---|---|---|---|
| Client-side filtering | หลักสิบถึงหลักร้อยรายการ | บน browser ของผู้ใช้ | ตอบสนองไวมากเมื่อพิมพ์ค้นหา ไม่ต้องมี backend ซับซ้อน | ถ้าข้อมูลมีขนาดใหญ่จะทำให้เปิดหน้าเว็บช้าและกิน memory |
| Database query | หลักร้อยถึงหลักหมื่นรายการ | บน server หรือระบบ database | โหลดเฉพาะข้อมูลที่ตรงเงื่อนไขมาแสดงผล รองรับการแบ่งหน้าได้ดี | ต้องเขียน query และตั้งค่า index ใน database ให้เหมาะสม |
| Full-text search | ข้อมูลเนื้อหายาวหรือหลายหมื่นรายการ | ระบบ database หรือ search engine | ค้นหาคำในบทความยาวๆ ได้เร็วและจัดลำดับความเกี่ยวข้องได้ | การตัดคำภาษาไทยอาจต้องตั้งค่าเพิ่มเติมเพื่อให้ค้นเจอคำย่อย |
| Vector search และ AI matching | ข้อมูลที่ต้องค้นหาตามความหมายหรือบริบท | ระบบ vector database ร่วมกับ AI model | เข้าใจความหมายใกล้เคียงกันแม้ผู้ใช้จะพิมพ์คำไม่ตรงกับในระบบเป๊ะๆ | มีขั้นตอนแปลงข้อมูลเป็น embedding และต้องดูแลค่าใช้จ่ายในการประมวลผล |
1. การกรองข้อมูลฝั่ง client สำหรับข้อมูลขนาดเล็กถึงกลาง
วิธีที่ง่ายและเร็วที่สุดสำหรับคนที่เพิ่งเริ่มสร้างเว็บด้วย AI คือการดึงข้อมูลทั้งหมดมาเก็บไว้ใน state ของหน้าเว็บ แล้วใช้ความสามารถของภาษา JavaScript ในการกรองข้อมูลจาก array โดยตรงเมื่อผู้ใช้พิมพ์คำค้นหาลงในช่อง input หรือกดเลือกหมวดหมู่จาก dropdown
วิธีนี้เหมาะมากกับเว็บที่มีข้อมูลไม่เกินไม่กี่ร้อยรายการ เช่น เว็บรวมรายการสินค้าเฉพาะกลุ่ม ตารางเปรียบเทียบข้อมูล หรือหน้าแสดงผลงาน เพราะทันทีที่ผู้ใช้เลือกตัวกรอง หน้าจอจะเปลี่ยนผลลัพธ์ทันทีโดยไม่ต้องรอโหลดข้อมูลใหม่จาก server อย่างไรก็ตาม หากข้อมูลแต่ละรายการมีรายละเอียดเยอะหรือมีจำนวนหลายพันรายการ การส่งข้อมูลทั้งหมดมาที่ browser ในครั้งเดียวจะทำให้หน้าเว็บโหลดช้าลงอย่างเห็นได้ชัด
2. การค้นหาผ่าน database query เมื่อข้อมูลเริ่มเยอะขึ้น
เมื่อเว็บของเรามีข้อมูลมากขึ้น หรือเป็นระบบที่เปิดให้ผู้ใช้เข้ามาเพิ่มข้อมูลได้เรื่อยๆ การดึงข้อมูลทั้งหมดมาไว้ที่หน้าเว็บจะไม่ตอบโจทย์อีกต่อไป แนวทางที่เหมาะสมคือการส่งคำค้นหาและเงื่อนไขจากตัวกรองไปยัง backend หรือสั่ง query ไปที่ database อย่าง Supabase หรือฐานข้อมูลอื่นๆ เพื่อดึงเฉพาะรายการที่ตรงกับเงื่อนไขกลับมาแสดงผล
ตัวอย่างของเว็บไซต์ที่มีการรวบรวมข้อมูลจำนวนมากให้ค้นหาได้คือ Profindle ซึ่งรวบรวม B2B Service Provider ที่เป็นนิติบุคคลในไทยกว่า 400 บริษัท ครอบคลุมหมวดหมู่ Marketing, HR, IT, Event, Accounting และ Legal โดยเปิดให้ผู้ประกอบการเข้ามาค้นหา Claim Profile หรือสร้าง Profile บริษัทใหม่ได้ฟรี พัฒนาด้วย Next.js และ deploy บน Vercel การมีหมวดหมู่ที่ชัดเจนควบคู่กับระบบค้นหาช่วยให้ผู้ใช้เจอบริษัทที่ตรงกับความต้องการได้รวดเร็วขึ้น
3. การทำ Full-text search สำหรับเนื้อหายาวและหลาย field
หากระบบค้นหาด้วยคำสั่งเปรียบเทียบข้อความธรรมดาเริ่มช้าเมื่อต้องค้นหาในบทความยาวๆ รายละเอียดสินค้าหลายย่อหน้า หรือค้นหาข้ามหลาย column พร้อมกัน การขยับมาใช้ Full-text search ที่ฐานข้อมูลรองรับจะช่วยให้ระบบค้นหาคำสำคัญได้เร็วขึ้น พร้อมทั้งจัดอันดับได้ว่าข้อมูลชิ้นไหนมีความเกี่ยวข้องกับคำค้นหามากกว่ากัน แต่สำหรับเนื้อหาภาษาไทย คนทำเว็บต้องระวังเรื่องการตัดคำ เพราะภาษาไทยเขียนติดกันโดยไม่มีช่องว่างคั่นระหว่างคำเหมือนภาษาอังกฤษ
4. การใช้ Vector search และ AI ช่วยคัดกรองหรือจับคู่ข้อมูล
ในหลายกรณี ผู้ใช้ไม่ได้ค้นหาด้วยคำสั้นๆ ที่ตรงกับตัวอักษรในฐานข้อมูลแบบคำต่อคำ แต่อยากค้นหาจากความหมาย บริบท หรือต้องการให้ระบบช่วยคัดกรองและจับคู่ข้อมูลที่มีเนื้อหาซับซ้อน เช่น การนำประวัติผู้สมัครงานมาเทียบกับรายละเอียดตำแหน่งงาน หรือการค้นหาความรู้จากคลังเอกสารขนาดใหญ่
ในกลุ่มผลงานของคนไทย มีการนำ AI และแนวคิดด้านการค้นหาเชิงความหมายมาประยุกต์ใช้จริงแล้ว ตัวอย่างเช่น HR AI Agent ระบบที่ช่วยสร้างคำบรรยายงานและวิเคราะห์จับคู่ผู้สมัครด้วย AI พร้อมทั้งจัดการใบสมัคร การคัดกรอง และนัดสัมภาษณ์ โดยฝั่งฝ่ายบุคคลสามารถดูแลกระบวนการสรรหาได้ ส่วนผู้สมัครก็กรอกใบสมัครและติดตามสถานะได้ ระบบนี้พัฒนาด้วย Next.js และ Tailwind เชื่อมต่อ backend กับ Supabase และ deploy บน Vercel
สำหรับผู้ที่อยากเข้าใจหลักการทำงานเบื้องหลังของการค้นหาด้วยความหมายและอยากทดลองสร้างระบบด้วยตัวเอง ยังมีผลงานสายการศึกษาอย่าง Second Brain ด้วย Vector Search ที่สอนเรื่อง vector search แบบลงมือทำ ตั้งแต่สมการไปจนถึงการสร้างระบบด้วย ChromaDB, LanceDB และ Cloudflare Edge โดยผู้เรียนสามารถเปิด Jupyter notebook ใน Google Colab เพื่อทดลองและวัดผลประกอบแต่ละบทได้ และตัวเว็บไซต์เผยแพร่อยู่บน GitHub Pages
ขั้นตอนสั่ง AI สร้างระบบ search และ filter ให้ทำงานแม่นยำ
เวลาใช้เครื่องมืออย่าง Claude Code, Codex หรือ Cursor สร้างระบบค้นหา มือใหม่หลายคนมักสั่งสั้นๆ เพียงแค่ให้เพิ่มช่องค้นหาในหน้าเว็บ ซึ่งมักจะได้แค่ช่องพิมพ์ข้อความที่ค้นหาได้เฉพาะชื่อหลักเพียงอย่างเดียว และพอเพิ่มตัวกรองอื่นๆ เข้าไป ระบบก็เริ่มทำงานขัดแย้งกันเอง เพื่อให้ได้ระบบที่ใช้งานได้จริง ควรแบ่งการสั่งงานออกเป็น 4 ขั้นตอนดังนี้
ขั้นที่ 1 กำหนดโครงสร้างข้อมูลและ field ที่ใช้ค้นหาให้ชัดเจน
ก่อนสั่งให้ AI สร้างหน้าจอค้นหา ให้ระบุโครงสร้างข้อมูลของเราก่อนว่าแต่ละรายการมี field อะไรบ้าง และแยกแยะให้ชัดว่า field ไหนควรใช้สำหรับการพิมพ์ค้นหาด้วยข้อความอิสระ และ field ไหนควรทำเป็นตัวเลือกสำหรับคัดกรอง
- ข้อมูลที่เหมาะกับช่องพิมพ์ search ได้แก่ ชื่อสินค้า ชื่อสถานที่ ชื่อบริษัท รหัสอ้างอิง หรือคำอธิบายสั้นๆ
- ข้อมูลที่เหมาะกับตัวกรองแบบเลือกค่า ได้แก่ หมวดหมู่, brand, จังหวัด, สถานะของงาน หรือรูปแบบบริการที่มีตัวเลือกจำกัด
- ข้อมูลตัวเลขหรือวันที่ เช่น ช่วงราคา คะแนนประเมิน หรือวันที่วางจำหน่าย ควรทำเป็นตัวกรองแบบกำหนดช่วง หรือแสดงผ่านปฏิทินและตัวเรียงลำดับ
ขั้นที่ 2 แยกความสัมพันธ์ระหว่างการค้นหาหลายเงื่อนไขให้ชัดเจน
ปัญหาคลาสสิกของการทำระบบคัดกรองข้อมูลคือการไม่ได้บอก AI ว่าเมื่อผู้ใช้เลือกหลายเงื่อนไขพร้อมกัน ระบบต้องคำนวณแบบไหน โดยทั่วไปหลักการที่ผู้ใช้คุ้นเคยที่สุดคือ
- การเลือกข้ามหมวดตัวกรอง เช่น พิมพ์คำค้นหา พร้อมกับเลือกหมวดหมู่ และเลือกจังหวัด ต้องใช้เงื่อนไขแบบและ คือข้อมูลที่จะแสดงต้องตรงกับทุกหมวดที่เลือกไว้
- การเลือกหลายตัวเลือกภายในหมวดเดียวกัน เช่น เลือก checkbox ของ brand รองเท้า 2 รายการพร้อมกัน ต้องใช้เงื่อนไขแบบหรือ คือแสดงสินค้าที่เป็นของ brand ใดก็ได้ในกลุ่มที่เลือกไว้
- การเก็บค่าการค้นหาไว้ใน URL parameter เช่นการต่อท้ายที่อยู่หน้าเว็บด้วยคำค้นหาและหมวดหมู่ที่เลือก เพื่อให้ผู้ใช้สามารถคัดลอก link หน้าผลการค้นหานั้นส่งต่อให้เพื่อน หรือกดปุ่มย้อนกลับบน browser แล้วค่าตัวกรองที่ตั้งไว้ไม่หายไป
ขั้นที่ 3 จัดการจังหวะการค้นหาด้วย debounce และ pagination
หากเว็บของเราเชื่อมต่อกับ database หรือเรียกใช้งาน API ทุกครั้งที่พิมพ์ตัวอักษร การที่ผู้ใช้พิมพ์คำว่าค้นหา 1 คำที่มีตัวอักษร 10 ตัว จะทำให้เว็บยิงคำสั่งไปที่ server ถึง 10 ครั้งติดกัน ส่งผลให้หน้าเว็บกระตุกและเปลืองทรัพยากรของระบบโดยไม่จำเป็น
วิธีแก้ไขคือสั่งให้ AI ใส่เทคนิคที่เรียกว่า debounce ในช่องค้นหา เพื่อหน่วงเวลาสั้นๆ ประมาณ 300 ถึง 500 มิลลิวินาทีหลังจากผู้ใช้หยุดพิมพ์แล้วค่อยส่งคำสั่งค้นหาจริง ควบคู่กับการทำระบบแบ่งหน้าหรือ pagination โดยกำหนด limit จำนวนรายการที่ดึงมาแสดงในแต่ละครั้ง เช่น แสดงครั้งละ 20 หรือ 30 รายการ เพื่อรักษาความเร็วในการแสดงผลบนหน้าจอ
ขั้นที่ 4 ออกแบบหน้าจอเมื่อไม่พบข้อมูลและปุ่มล้างตัวกรอง
ระบบค้นหาที่ดีต้องรองรับกรณีที่ผู้ใช้พิมพ์คำค้นหาหรือเลือกตัวกรองหลายชั้นจนไม่มีข้อมูลที่ตรงกับเงื่อนไขเลย แทนที่จะปล่อยให้หน้าจอว่างเปล่าจนผู้ใช้เข้าใจผิดว่าเว็บเสีย ให้สั่ง AI สร้างส่วนแสดงผลเมื่อไม่พบข้อมูลที่บอกอย่างชัดเจนว่าไม่พบรายการที่ตรงกับคำค้นหานั้น พร้อมทั้งมีปุ่มกดล้างตัวกรองทั้งหมดใน click เดียว เพื่อให้ผู้ใช้เริ่มต้นค้นหาใหม่ได้ทันทีโดยไม่ต้องไล่กดยกเลิกทีละช่อง
ปัญหาที่พบบ่อยเวลาให้ AI เขียนระบบค้นหา และวิธีสั่งแก้
แม้ AI จะเขียน code ส่วนของการกรองข้อมูลได้เร็ว แต่ในการใช้งานจริงกับข้อมูลภาษาไทยและภาษาอังกฤษปนกัน มักจะมีจุดเล็กๆ ที่ทำให้ผู้ใช้ค้นหาข้อมูลไม่เจอ ซึ่งเราสามารถตรวจสอบและสั่งให้ AI ปรับปรุงได้ดังนี้
1. พิมพ์ตัวพิมพ์เล็กหรือตัวพิมพ์ใหญ่ไม่ตรงกันแล้วหาไม่เจอ
เวลาค้นหาชื่อ brand หรือคำศัพท์ภาษาอังกฤษ เช่นใน数据库เก็บคำว่า Next.js แต่ผู้ใช้พิมพ์ค้นหาด้วยตัวพิมพ์เล็กทั้งหมด หาก code ที่ AI เขียนใช้การเปรียบเทียบข้อความแบบตรงตัวเป๊ะๆ จะทำให้ค้นหาไม่เจอ วิธีแก้คือสั่งให้ AI แปลงทั้งข้อมูลต้นทางและคำค้นหาให้เป็นตัวพิมพ์เล็กทั้งหมดด้วยคำสั่งแปลงข้อความก่อนนำมาเปรียบเทียบกันเสมอ
2. ช่องว่างหน้าคำและหลังคำทำให้ผลการค้นหาเพี้ยน
ผู้ใช้ที่เปิดเว็บผ่านหน้าจอมือถือมักจะมีช่องว่างติดมาที่ท้ายคำโดยไม่ตั้งใจเวลาใช้ระบบเดาคำของแป้นพิมพ์ หรือเวลาคัดลอกข้อความมาวางในช่อง search หากไม่ได้สั่งให้ระบบตัดช่องว่างส่วนเกินที่หัวและท้ายข้อความออกก่อน ระบบจะนำช่องว่างนั้นไปค้นหาด้วยและทำให้ไม่พบข้อมูล ควรสั่งให้ AI ใช้คำสั่งตัดช่องว่างส่วนเกินออกจากค่า input ทุกครั้ง
3. ลบคำค้นหาออกหมดแล้วแต่รายการทั้งหมดไม่กลับมาแสดง
อีกจุดที่เจอบ่อยเวลาให้ AI แยกตัวแปรสำหรับเก็บข้อมูลทั้งหมดกับตัวแปรสำหรับเก็บข้อมูลที่กรองแล้ว คือเมื่อผู้ใช้พิมพ์ค้นหาจนเจอรายการที่ต้องการ แล้วกดลบข้อความในช่องค้นหาจนว่างเปล่า หน้าเว็บกลับค้างอยู่ที่ผลการค้นหาเดิม วิธีป้องกันคือการให้ AI คำนวณรายการที่จะแสดงผลสดใหม่จากข้อมูลต้นทางร่วมกับค่าของ state ปัจจุบันเสมอ แทนที่จะเขียนทับตัวแปรข้อมูลหลักโดยตรง
แนวทางเลือกวิธีทำระบบค้นหาให้เหมาะกับระยะของเว็บ
สำหรับคนที่กำลังสร้างเว็บหรือแอปตัวแรกด้วย AI ไม่จำเป็นต้องเริ่มจากการวางระบบค้นหาที่ซับซ้อนที่สุดตั้งแต่วันแรก หากข้อมูลในระบบยังมีไม่ถึงหลักร้อยรายการ การให้ AI สร้างระบบกรองข้อมูลฝั่ง client ที่มีช่องพิมพ์คำค้นหาคู่กับปุ่มเลือกหมวดหมู่และปุ่มเรียงลำดับข้อมูล ก็เพียงพอที่จะมอบประสบการณ์การใช้งานที่รวดเร็วและดูแลรักษาง่ายแล้ว
เมื่อเว็บไซต์เริ่มมีผู้ใช้งานจริง มีข้อมูลสะสมมากขึ้นจนการโหลดหน้าแรกเริ่มช้าลง หรือมีโจทย์ที่ต้องคัดกรองและจับคู่ข้อมูลที่มีรายละเอียดซับซ้อน เราค่อยสั่งให้ AI ปรับโครงสร้างการค้นหาไปเชื่อมต่อกับ database query หรือต่อยอดด้วยระบบคัดกรองอัจฉริยะและ vector search ในลำดับถัดไป การเข้าใจทางเลือกแต่ละแบบจะช่วยให้เราคุยกับ AI ได้ตรงจุด และสร้างเว็บที่ผู้ใช้หาข้อมูลทุกอย่างเจอได้ในไม่กี่วินาที
