สวัสดีครับพี่ๆ 🙏 ทุกคนผมชื่อ “ภูมิ” นะครับ นี้ก็เป็นบทความแรกของผมเลย เนื่องจากผมมีปัญหาว่า ผมอยากใช้งาน earthchie/jquery.Thailand.js แต่ด้วยความที่พี่เขาเขียนขึ้นมาเพื่อใช้งานกับ JQuery และผมต้องการเอาไปใช้งานกับ JS Framework ที่หลากหลายไม่ว่าจะเป็น React, Vue, Angular แต่ก็มีพี่ๆหลายท่านทำ library ที่เป็น Auto Complete ที่ต่อยอดมาจาก earthchie/jquery.Thailand.js ทำออกมาดีเลยแหละ แต่ก็ใช้งานได้กับแค่ Framework นั้นๆ ซึ่งมันยังไม่ตรงใจผมเท่าไหร่ ผมอยากจะใช้งาน Thai Address กับ Antd ทั้งใน React, Vue หรือแม้กระทั้ง Angular

[

ระบบ Auto Complete ที่อยู่ไทย อย่างที่มันควรเป็น

Update 24 เมษา 60: ตอนนี้มีอัพเดตเพิ่มขึ้นเยอะมากๆ นับตั้งแต่วันที่ปล่อยบทความนี้ก็มีหลายๆ ท่านที่เข้ามาช่วยปรับปรุง…

medium.com

](/earthchie/ระบบ-auto-complete-ที่อยู่ไทย-อย่างที่มันควรเป็น-27360185d86a?source=post_page-----83b7556473ba--------------------------------)

ผมเลยตั้งคำถามขึ้นมาว่า 🤔 แล้วมันไม่มี library ที่เป็นเหมือนจุดกึ่งกลางเลยหรอที่สามารถใช้งานได้กับทุก Framework และสามารถเอาไป Custom ใส่ CSS Component ต่างๆได้ ที่ผมหาใกล้เคียงสุดก็จะเป็น thai-address-database ของทาง Sellsuki แต่พอผมเอาไปใช้งานกับพบว่าเวลาเรา import มันขึ้นตัวสีแดงๆ บอกไม่มี Type เนื่องจาก library นี้เขียนขึ้นมาด้วย JS เลยไม่มี Type ซึ่งมันขัดใจ ผมสุดๆ ผมเลยตัดสินใจ เออไหนๆก็ปีใหม่แล้ว ลองหน่อยละกัน ไม่เสียหายอะไรนิ

[

GitHub - Sellsuki/thai-address-database: ฐานข้อมูลที่อยู่ในไทย ไม่ต้องใช้ Server Side!

ฐานข้อมูลที่อยู่ในไทย ไม่ต้องใช้ Server Side! Contribute to Sellsuki/thai-address-database development by creating an…

github.com

](https://github.com/Sellsuki/thai-address-database?source=post_page-----83b7556473ba--------------------------------)

ผมเลยจะเขียน library thai-address สำหรับทุก Framework ขึ้นมา ผมทำขึ้นมาเพื่อแก้ปัญหาตัวผมเองและเพื่อนๆ ผมด้วย และผมเชื่อว่าก็มีพี่ๆหลายคนคงมีปัญหาคล้ายๆกัน

เริ่มแรกเลย

ด้วยความที่ผมมีประสบการณ์เขียน library ลง NPM น้อยมาก เคยเอาศึกษาอยู่แต่ไม่จริงจัง แต่ครั้งนี้ เรากำลังจะเขียน library เพื่อแก้ปัญหาระดับชาติกัน😅 ผมก็อาศัยพี่ ChatGPT นี้แหละ ศึกษานั้นศึกษานี้ จนผมรู้ว่า อ้ออ มันต้องใช้ JS Build Bundle พวก esbuild, Rollup, Rolldown, Webpack เพื่อ Build โค้ดเราให้รองรับทั้ง การเอาไปใช้งานบน Web Browser หรือ รันบน NodeJS, BUN, Deno

ผมเลือกใช้ Rollup เพราะมี plugin เยอะดีและใช้งานง่าย ผมก็เริ่มด้วยการสร้างโปรเจคขึ้นมาใหม่ เขียนด้วย TypeScript โดยอ้างอิงโค้ดเดิมจากทาง thai-address-database ผมมีการแก้ไข Database ให้เป็นตัวล่าสุด และปล่อยขึ้น NPM ด้วยชื่อว่า thai-address-universal

[

thai-address-universal

Thai Address Universal is a TypeScript-based library derived from thai-address-database, offering improved performance…

www.npmjs.com

](https://www.npmjs.com/package/thai-address-universal?source=post_page-----83b7556473ba--------------------------------)

อัพเกรด

หลังจากผมทำเวอร์ชั่นแรกเสร็จแล้ว ผมก็อยากจะอัพเกรดเพิ่มเติม โดยการ ดึงข้อมูล จังหวัด, อำเภอ, ตำบล, รหัสไปรษณีย์ไทย แยกออกมา และทำการ Cache ข้อมูลที่เคยค้นหาไว้ ผมชอบคำคมหนึ่งจากการไปนั่งเรียน Dynamic Programming มาคือ

Those who cannot remember the past are condemned to repeat it.

มันอาจจะเปลือง Memory หน่อยแต่ผมว่ามันคงจะดีนะ ฮ่าๆ 😅 และผมก็มีการปรับปรุงโค้ดจากเดิมให้อ่านง่ายขึ้นด้วยพี่ ChatGPT อีกแล้ววว และเพื่อนผมขอมาว่าทำให้มันรองรับคำภาษาอังกฤษได้ไหม ผมเลยไปหาข้อมูลมาจนเจอ thai-address-database ของทาง Bangmod Cloud เขาได้ทำ database ที่เป็นภาษาอังกฤษไว้ ผมจึงนำข้อมูลชุดนั้นมารวมกับข้อมูลชุดเดิม ทำให้ library นั้นมี Mode สามารถเลือกได้ว่าจะใช้ คำไทย หรือ คำอังกฤษ

[

GitHub - bangmodcloud/thai-address-database

Contribute to bangmodcloud/thai-address-database development by creating an account on GitHub.

github.com
](https://github.com/bangmodcloud/thai-address-database?source=post_page-----83b7556473ba--------------------------------)

Недоліки

1.
ไฟล์ข้อมูล JSON ถูกแทรกเข้ามาในโค้ด เลยทำให้ไฟล์ค่อนข้างใหญ่ประมาณ 380kb ได้ (ไม่รวม gzip)
2. ยังไม่รองรับ ZIP ไฟล์
3. ยังไม่รองรับข้อมูลที่มี Geo

Все, закінчено!

Щиро дякую всім, хто дочитав до цього місця 🙏. Якщо в статті є помилки чи неточності, прошу вибачення. Також, не забувайте про thai-address-universal, щоб ми нарешті мали універсальну бібліотеку для Thai Address, що працює з різними Framework!

Хочу зазначити, що я не є великим фахівцем, тому код може бути не зовсім ідеальним 😅. Якщо хтось із вас зацікавлений і хоче приєднатися до розвитку, буду радий, якщо ви долучитесь! 🙂

[

thai-address-universal

Thai Address Universal – це бібліотека на TypeScript, що розроблена на основі thai-address-database, з поліпшеною продуктивністю...

www.npmjs.com

](https://www.npmjs.com/package/thai-address-universal?source=post_page-----83b7556473ba--------------------------------)

Перекладено з: Thai Address สำหรับทุก Framework