ตัวช่วยกรอกข้อมูลจังหวัด อำเภอ ตำบล รหัสไปรษณี ของประเทศไทย โดยได้รับแรงบันดาลใจมาจาก https://github.com/earthchie/jquery.Thailand.js โดยใช้ฐานข้อมูล จังหวัด อำเภอ ตำบล รหัสไปรษณี ของประเทศไทย จาก https://github.com/kongvut/thai-province-data
- ติดตั้ง Dependencies
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/typeahead.bundle.min.js"></script>
- ติดตั้ง ThailandAddressTypeahead
<link rel="stylesheet" href="https://raw.githubusercontent.com/totza2010/ThailandAddressTypeahead/master/dist/ThailandAddressTypeahead.min.css">
<script type="text/javascript" src="https://raw.githubusercontent.com/totza2010/ThailandAddressTypeahead/master/dist/ThailandAddressTypeahead.min.js"></script>
- สร้าง input สำหรับกรอก ตำบล, อำเภอ, จังหวัด, รหัสไปรษณีย์ 3.1 สำหรับ input ข้อมูลภาษาไทย
<input type="text" id="tambon_th">
<input type="text" id="amphure_th">
<input type="text" id="province_th">
<input type="text" id="zipcode">
3.2 สำหรับ input ข้อมูลภาษาอังกฤษ
<input type="text" id="tambon_en">
<input type="text" id="amphure_en">
<input type="text" id="province_en">
<input type="text" id="zipcode">
- เรียกใช้ ThailandAddressTypeahead 4.1 สำหรับตั้งค่า ข้อมูลภาษาไทย
$.Address({
$tambon_th: $('#tambon_th'), // input ของตำบล
$amphure_th: $('#amphure_th'), // input ของอำเภอ
$province_th: $('#province_th'), // input ของจังหวัด
$zipcode: $('#zipcode'), // input ของรหัสไปรษณีย์
});
4.2 สำหรับตั้งค่า ข้อมูลภาษาอังกฤษ
$.Address({
$tambon_en: $('#tambon_en'), // input ของตำบล
$amphure_en: $('#amphure_en'), // input ของอำเภอ
$province_en: $('#province_en'), // input ของจังหวัด
$zipcode: $('#zipcode'), // input ของรหัสไปรษณีย์
});
4.3 สำหรับตั้งค่าข้อมูลทั้งสองภาษา
$.Address({
$tambon_th: $('#tambon_th'), // input ของตำบล
$amphure_th: $('#amphure_th'), // input ของอำเภอ
$province_th: $('#province_th'), // input ของจังหวัด
$tambon_en: $('#tambon_en'), // input ของตำบล
$amphure_en: $('#amphure_en'), // input ของอำเภอ
$province_en: $('#province_en'), // input ของจังหวัด
$zipcode: $('#zipcode'), // input ของรหัสไปรษณีย์
});
4.3 กำหนดค่า Database จากภายนอก
$.Address({
database: './ThailandAddressTypeahead/database/db.json', // path หรือ url ไปยัง database
$tambon_th: $('#tambon_th'), // input ของตำบล
$amphure_th: $('#amphure_th'), // input ของอำเภอ
$province_th: $('#province_th'), // input ของจังหวัด
$tambon_en: $('#tambon_en'), // input ของตำบล
$amphure_en: $('#amphure_en'), // input ของอำเภอ
$province_en: $('#province_en'), // input ของจังหวัด
$zipcode: $('#zipcode'), // input ของรหัสไปรษณีย์
});
*** Database ที่ใช้ต้องมี Format ตามนี้เท่านั้น
[
{
"id": 1,
"name_th": "กรุงเทพมหานคร",
"name_en": "Bangkok",
"geography_id": 2,
"created_at": "2019-08-09T03:33:09.000+07:00",
"updated_at": "2022-05-16T06:31:03.000+07:00",
"deleted_at": null,
"amphure": [
{
"id": 1001,
"name_th": "เขตพระนคร",
"name_en": "Khet Phra Nakhon",
"province_id": 1,
"created_at": "2019-08-09T03:33:09.000+07:00",
"updated_at": "2022-05-16T06:31:26.000+07:00",
"deleted_at": null,
"tambon": [
{
"id": 100101,
"zip_code": 10200,
"name_th": "พระบรมมหาราชวัง",
"name_en": "Phra Borom Maha Ratchawang",
"amphure_id": 1001,
"created_at": "2019-08-09T03:33:09.000+07:00",
"updated_at": "2022-05-16T06:31:31.000+07:00",
"deleted_at": null
}
]
}
]
}
]
*** ใช้งาน $.Address.setup()
เพื่อกำหนดค่า default
$.Address.setup({
database: './ThailandAddressTypeahead/database/db.json'
});
// ไม่ต้องกำหนด path ของ database ซ้ำ
$.Address({
$search: $('#demo1 [name="search"]'),
onDataFill: function(data){
console.log(data)
}
});
// ไม่ต้องกำหนด path ของ database ซ้ำเช่นกัน
$.Address({
$search: $('#demo2 [name="search"]'),
onDataFill: function(data){
console.log(data)
}
});
$.Address({
$search: $('#search'), // input ของช่องค้นหา
onDataFill: function(data){ // callback เมื่อเกิดการ auto complete ขึ้น
console.log(data);
}
});
geodb คือข้อมูล Area Code ของแต่ละพื้นที่
$.Address({
database: './ThailandAddressTypeahead/database/db.json',
$search: $('#search'),
$tambon_id: $('#tambon_id'),
$amphure_id: $('#amphure_id'),
$province_id: $('#province_id'),
onDataFill: function(data){
console.log(data);
/*
ผลลัพธ์ที่ได้
{
tambon_id: '',
tambon_th: '',
tambon_en: '',
amphure_id: '',
amphure_th: '',
amphure_en: '',
province_id: '',
province_th: '',
province_en: '',
zipcode: ''
}
*/
}
});
$.Address({
// path หรือ url ไปยัง database
database: './ThailandAddressTypeahead/database/db.json',
// ขนาดของตัวเลือกใน Dropdown
// (ไม่ระบุก็ได้ ค่า default คือ 20)
autocomplete_size: 20,
// input area code ของตำบล
// (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
$tambon_id: $('#tambon_id'),
// input ของตำบลภาษาไทย
// (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
$tambon_th: $('#tambon_th'),
// input ของตำบลภาษาอังกฤษ
// (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
$tambon_en: $('#tambon_en'),
// input area code ของอำเภอ
// (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
$amphure_id: $('#amphure_id'),
// input ของอำเภอภาษาไทย
// (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
$amphure_th: $('#amphure_th'),
// input ของอำเภอภาษาอังกฤษ
// (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
$amphure_en: $('#amphure_en'),
// input area code ของจังหวัด
// (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
$province_id: $('#province_id'),
// input ของจังหวัดภาษาไทย
// (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
$province_th: $('#province_th'),
// input ของจังหวัดภาษาอังกฤษ
// (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
$province_en: $('#province_en'),
// input ของรหัสไปรษณีย์
// (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
$zipcode: $('#zipcode'),
// input ของช่องค้นหา
// (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
$search: $('#search'),
// ภาษาของช่องค้นหา
// (ไม่ระบุก็ได้ ค่าเริ่มต้นคือ ภาษาไทย)
lang: "th",
// callback เมื่อเกิดการ auto complete ขึ้น
// (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
onDataFill: function(data){
console.log('Data Filled', data);
},
// callback เมื่อโหลดฐานข้อมูลเสร็จและระบบ Auto Complete พร้อมที่จะทำงาน
// (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
onLoad: function(){
console.info('Autocomplete is ready!');
},
// object templates ใช้สำหรับ render dataset ใน typeahead.js
// สามารถอ่านเพิ่มเติมได้ที่ field templates ใน https://github.com/corejavascript/typeahead.js/blob/master/doc/jquery_typeahead.md#datasets
// (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
templates: {
empty: " ",
suggestion: entry => {
// Format the suggestion entry for display
let tambon = entry.tambon;
let amphure = entry.amphure;
let province = entry.province;
let zipcode = entry.zipcode;
return `<div>${tambon} --> ${amphure} --> ${province} --> ${zipcode}</div>`;
},
}
});
earthchie - Project Owner, Original fork
WTFPL 2.0 http://www.wtfpl.net/