เริ่มใช้งาน

1ติดตั้งแพ็กเกจ

รันคำสั่งนี้ในโฟลเดอร์แอปของคุณ

npm install thai-address-sdk

pnpm add thai-address-sdk
# หรือ
yarn add thai-address-sdk

Playground ในเว็บนี้ใช้เวอร์ชัน 0.1.2 หากต้องการผลลัพธ์ตรงกัน ให้ติดตั้ง thai-address-sdk@0.1.2

2ค้นหาที่อยู่ครั้งแรก

ใช้ search() เมื่อคำค้นเป็นชื่อพื้นที่ เช่น จังหวัด อำเภอ หรือตำบล ฟังก์ชันจะคืนรายการผลลัพธ์ที่เรียงตามคะแนน

import { search } from "thai-address-sdk";

const [result] = search("อยูทยา", {
  levels: ["province"],
  limit: 1,
});

console.log(result?.province.provinceNameTh);
// "พระนครศรีอยุธยา"

console.log(result?.match.matchType);
// "fuzzy"

ข้อมูลอยู่ในแพ็กเกจและประมวลผลแบบ synchronous จึงไม่ต้องใส่ await เมื่อเรียกฟังก์ชัน SDK หากค้นหาไม่พบจะได้อาร์เรย์ว่าง

3จัดรูปแบบข้อความหลายส่วน

ใช้ normalizeAddress() เมื่อมีชื่ออำเภอร่วมกับจังหวัด ระบบจะพิจารณาความสัมพันธ์ของพื้นที่และรายงานคำที่แก้ไข

import { normalizeAddress } from "thai-address-sdk";

const result = normalizeAddress("บางปะอิน อยูทยา");

console.log(result.status);
// "matched"

console.log(result.bestMatch?.formattedAddress);
// "อำเภอบางปะอิน จังหวัดพระนครศรีอยุธยา"

console.log(result.corrections);
// รายการคำที่ปรับให้ตรงกับข้อมูล

4นำข้อมูลไปสร้าง dropdown

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

import {
  getProvinces,
  getDistricts,
  getSubdistricts,
} from "thai-address-sdk";

const provinces = getProvinces();
const districts = getDistricts({ provinceCode: 14 });
const subdistricts = getSubdistricts({ districtCode: 1406 });

const selected = subdistricts.find(
  (item) => item.subdistrictCode === 140601,
);
console.log(selected?.postalCode);
// 13160

เมื่อเปลี่ยนจังหวัด ให้ล้างค่าอำเภอและตำบล เมื่อเปลี่ยนอำเภอ ให้ล้างค่าตำบล เพื่อไม่ให้พื้นที่ต่างระดับขัดแย้งกัน

นำไปใช้ในแอปของคุณ

ใช้รหัสพื้นที่เป็น identifier และเก็บชื่อไว้แสดงผล ในช่อง autocomplete ควรหน่วงการค้นหาประมาณ 200 มิลลิวินาที และโหลด SDK เมื่อส่วนฟอร์มจำเป็นต้องใช้ข้อมูล