การใช้งาน Thailand address แบบ auto complete ในแบบฉบับ React
สวัสดีครับสืบเนื่องจากได้ไปทดลองใช้ address auto complete ของที่อยู่ในประเทศไทยของท่านหนึ่งที่เขียนไว้ในรูปแบบ jquery แต่ประเด็นคือ dev React อย่างเราๆ ต้องการใช้งานในรูปแบบ React component ไปเลยจึงเริ่มเกิดแนวคิดอยากทำ component ไว้ใช้เองบ้างก็เลยตามไปดูใน repository ที่เขาแชร์ไว้ให้เรา
เริ่มต้นเดิมที่จากทาง Thailand address ได้เขียนไว้ในรูปแบบ jquery เอาจริงๆ เราก็สามารถใช้ jquery รวมเข้ากับ react ได้เช่นกันแต่ในเมื่อในบทความนี้เปิดหัวเรื่องมาว่าต้องเป็น React component ก็ต้องทำเป็น component สิ
พอเข้าไปดูรายละเอียดจริงๆ เราแค่ต้องการ master file ที่เป็น JSON ซึ่งก็ต้องให้เครดิตเจ้าของคุณ earthchie ที่ทำข้อมูลไว้ให้นะครับ
หลังจากที่มีข้อมูล master แล้วพระเอกของเราก็คือ jqljs โดยการทำงานของมันก็คือ SQL นั่นแหละครับแต่ source มันเป็น JSON data นั่นเองครับ
เมื่อกล่าวถึงเครื่องมือครบกันแล้วก็มาลงมือทำกันเลยครับอย่างแรกก็ create project เลยครับ โปรเจคนี้เราจะเขียนเป็น typescript นะครับ
create-react-app thailand-address --typescript
// ต่อด้วยติดตั้ง material-ui
yarn add @material-ui/core
yarn add @material-ui/lab
yarn add jqljsเมื่อเตรียม dev dependencies เสร็จแล้วก็เข้าไปทำการ download master file ในลิ้งค์นี้ครับ จะได้เป็นไฟล์ database ใน format JSON data แล้วก็นำมาแปะไว้ในโปรเจคเราครับ
เริ่มจากสร้างตัว query ข้อมูลครับ โดยใช้ jqljs เป็นตัว query ข้อมูลจากฐานข้อมูล
จาก code เบื้องต้นเราได้ทำการ process data โดยจะมี key ในการค้นหาดังนี้
- subDistrict : ค้นหาโดยตำบล
- district : ค้นหาโดยอำเภอ
- province: ค้นหาโดยจังหวัด
- postcode: ค้นหาโดยรหัสไปรษณีย์
จากนั้นก็สร้าง Form โดยใช้ code ตามนี้เลยครับ
เมื่อทุกอย่างโอเคแล้วก็รันทดสอบผลครับ
ทดสอบพิมพ์ค้นหาที่อยู่ก็จะมีหน้าตาออกมาประมาณนี้
สุดท้ายก็แค่เลือกว่าใช้ที่อยู่อะไรโปรแกรมก็จะเลือกไป fill input ให้ครบง่ายนิดเดียว
สุดท้ายและท้ายสุดหลายๆ การทำ auto complete ในส่วนของที่อยู่นั่นจะเพิ่มเรื่อง UX ให้กับผู้ใช้งานหรือไม่ว่าจะเป็น admin ที่ไม่ต้องคอยปวดหัวว่าผู้ใช้งานนั้นพิมพ์ข้อมูลที่อยู่ผิด หวังว่าจากตัวอย่างนี้น่าจะช่วยให้หลายๆ คนนำไปประยุกต์ใช้ได้ไม่มากก็น้อยนะครับ
สำหรับ code ตัวอย่างตามลิงค์ไป clone ใน Github ได้เลยนะจ๊ะ…..
Credit