Web App—Auto Complete สำหรับข้อมูลที่อยู่

ในการที่จะให้ผู้ใช้งานกรอกแบบฟอร์มข้อมูลเพื่อเก็บที่อยู่ของผู้ใช้นั้น ด้วยประสบการณ์ของตัวผมเองจะพบเจอแบบฟอร์มที่ให้กรอกข้อมูลทั้งหมดเองแทบทุกครั้ง มีน้อยมากที่จะให้พิมพ์ชื่อตำบลแล้วมีรายการขึ้นมาให้เลือกแบบ Auto Complete ให้ทั้งหมดเลย จนวันหนึ่งผมได้ไปอ่านบทความ ระบบ Auto Complete ที่อยู่ไทย อย่างที่มันควรเป็น ซึ่งเป็นแนวคิดที่ชอบมากๆ ซึ่งประเด็นสำคัญๆ ที่บทความกล่าวถึงก็คือ

ประเด็นแรกเลยครับ กลับไปใช้วิธีกรอกที่อยู่แบบเล็กไปหาใหญ่ จากนั้นประเด็นที่สอง ทำยังไงก็ได้ ให้ผู้ใช้กรอกได้ง่าย และกรอกได้เร็วที่สุด

จากแนวคิดด้านบน ในฐานะ Noob ผมเลยอยากจะทดลองทำระบบ Auto Complete ด้วยตัวเองดูบ้าง ผลที่ได้ก็ออกมาได้ประมาณนี้ครับ ทดลองใช้งานได้ที่ https://thailand-search-address-bc7a9.web.app/


1. ฐานข้อมูล

ก่อนจะเริ่มก็ต้องหาข้อมูลตำบล อำเภอ จังหวัด รหัสไปรษณีย์ของประเทศไทยมาซะก่อน และก็มีท่านเทพใจดีได้จัดทำมาให้สามัญชนอย่างเรานำมาใช้งานนั่นคือ เทพเอ็กเซล เพื่อนๆ สามารถเข้าไป Download ฐานข้อมูลได้เลยครับ

แต่สำหรับผมนั้นจะทำการเลือกข้อมูลที่จะใช้งานและเปลี่ยนข้อมูลให้อยู่ในรูปแบบ JSON ก่อนนำมาใช้ครับ โดยเพื่อนๆ สามารถไปโหลดไฟล์ JSON ข้อมูลตำบล อำเภอ จังหวัด รหัสไปรษณีย์ของประเทศไทยได้ ที่นี่ เลยครับ ซึ่งจะมีโครงสร้างข้อมูลที่จะเอามาใช้งานประมาณนี้

สำหรับการตกแต่งรูปร่างหน้าตาผมเลือกที่จะทดลองใช้งาน W3.CSS ซึ่งเป็น CSS Framework แบบ Modern Responsive CSS และสำคัญที่สุดเลยคือฟรี!!! 💖 เพื่อนๆ ที่อยากลองสร้างเว็บไซต์ และเว็บฟอร์มสวยๆ ดูเบา สบายตาแบบ Minimal ด้วย W3.CSS ก็ลองไปดูรายละเอียดได้เลยครับ

มาดูหน้าตาเว็บฟอร์มกันครับ ซึ่งในช่องบนสุดเพียงพิมพ์คำที่ต้องการค้นหาก็จะขึ้นข้อมูลมาให้เลือก และเพียงคลิ๊กเลือกรายการที่ต้องการ ก็จะกรอกข้อมูลนั้นลงในช่องข้อมูลต่างๆ ให้แบบอัตโนมัติเลยครับ


2. Source Code

— Source Code HTML และ CSS

— Source Code CSS

— Source Code JavaScript

อธิบายแบบคร่าวๆ ได้ดังนี้ คือฟังก์ชัน getThailand() จะทำการอ่านข้อมูลในไฟล์ JSON / ฟังก์ชัน searchAddress() นำคำค้นหาที่ผู้ใช้พิมพ์มาค้นหาข้อมูลใน JSON ตามเงื่อนไขที่กำหนด / ฟังก์ชัน outputHtml() นำรายการที่ค้นหาไปแสดงเป็นรายการให้ผู้ใช้งานเลือก / ฟังก์ชัน selection() หากผู้ใช้งานคลิ๊กเลือกรายการที่ต้องการให้นำข้อมูลกรอกในฟอร์ม


ท้ายสุด สำหรับบทความนี้ก็เป็นแนวทางหนึ่งที่จะนำเอาระบบไปใช้เป็นแนวทางสำหรับฐานข้อมูลอื่นๆ ที่ไม่ต้องการให้ผู้ใช้ต้องมากรอกข้อมูลทุกอย่างเองทั้งหมด หรือใช้ในการค้นหาที่อยู่ รหัสไปรษณีย์ ในประเทศไทย หรือใช้สำหรับช่วยให้ผู้ใช้งานกรอกข้อมูลที่อยู่ ได้แบบง่ายๆ มากขึ้น ถึงแม้ว่าเรื่องการกรอกข้อมูลที่อยู่มันจะเป็นเรื่องเล็กๆ แต่ผมเชื่อว่ามันจะทำให้ผู้ใช้งานชอบใจ และอยากจะกรอกข้อมูลมากขึ้น และมันจะเป็นผลดีต่อเว็บไซต์ของทุกคนแน่นอนครับ Happy Coding…🔥🔥🔥


อ้างอิง
1. ระบบ Auto Complete ที่อยู่ไทย อย่างที่มันควรเป็น
2. Quick Autocomplete App With JS & JSON


โปรโมชั่น คูปองส่วนลด และดีล ที่ดีที่สุดของร้านค้าออนไลน์กว่า 300 แบรนด์พร้อมรับเงินคืนจาก ShopBack
🔗 https://bit.ly/3c4tlmV

Ruk-Com จดโดเมน-เช่าโฮสต์ ราคาประหยัด พร้อมให้บริการใน 1 นาที
🔗 http://bit.ly/36q8A12