อ้างอิง : https://github.com/earthchie/jquery.Thailand.js
วิธีใช้
ในส่วนนี้จะเป็นวิธีใช้อย่างคร่าวๆ หากต้องการรายละเอียดเพิ่มเติม อ่านได้ที่ ตัวช่วยกรอกที่อยู่ที่ดีที่สุดในไทย
1. ติดตั้ง Dependencies ให้ครบ
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dependencies/JQL.min.js"></script>
<script src="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dependencies/typeahead.bundle.js"></script>
2. ติดตั้ง jquery.Thailand.js
<link rel="stylesheet" href="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dist/jquery.Thailand.min.css">
<script src="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dist/jquery.Thailand.min.js"></script>
3. สร้าง input สำหรับกรอก ตำบล, อำเภอ, จังหวัด, รหัสไปรษณีย์
<input type="text" id="district">
<input type="text" id="amphoe">
<input type="text" id="province">
<input type="text" id="zipcode">
4. เรียกใช้ jquery.Thailand.js
$.Thailand({
$district: $('#district'), // input ของตำบล
$amphoe: $('#amphoe'), // input ของอำเภอ
$province: $('#province'), // input ของจังหวัด
$zipcode: $('#zipcode'), // input ของรหัสไปรษณีย์
});
ตัวอย่าง
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit">
<!-- bootstrap@5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<!-- jquery.Thailand.min.css -->
<link rel="stylesheet" href="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dist/jquery.Thailand.min.css">
<style>
* {
font-family: "Kanit";
}
</style>
</head>
<body>
<div class="container">
<div class="my-3">
<h1>ที่อยู่ อัตโนมัติ </h1>
<p>พัฒนา โดย <a href="https://earthchie.github.io/jquery.Thailand.js/" target="_blank">https://earthchie.github.io/</a></p>
</div>
<form id="demo" class="row g-3" autocomplete="off">
<div class="col-md-6">
<label for="name" class="form-label">ชื่อ</label>
<input type="text" class="form-control" id="fname" name="fname">
</div>
<div class="col-md-6">
<label for="lastname" class="form-label">นามสกุล</label>
<input type="text" class="form-control" id="lastname" name="lastname">
</div>
<div class="col-md-6">
<label for="inputAddress" class="form-label">บ้านเลขที่ หมู่ ถนน</label>
<input type="text" class="form-control" id="inputAddress" name="inputAddress" placeholder="1234 ถนนหน้าพระลาน">
</div>
<div class="col-md-6">
<label for="district" class="form-label">แขวง/ตำบล</label>
<input type="text" class="form-control" id="district" name="district">
</div>
<div class="col-md-6">
<label for="amphoe" class="form-label">เขต/อำเภอ</label>
<input type="text" class="form-control" id="amphoe" name="amphoe">
</div>
<div class="col-md-6">
<label for="province" class="form-label">จังหวัด</label>
<input type="text" class="form-control" id="province" name="province">
</div>
<div class="col-md-6">
<label for="Zip" class="form-label">รหัสไปรษณีย์</label>
<input type="number" class="form-control" id="zipcode" name="zipcode">
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">บันทึก</button>
</div>
</form>
</div>
<!-- jquery-3.7 -->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<!-- bootstrap@5 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- jquery.Thailand.min.js -->
<script src="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dist/jquery.Thailand.min.js"></script>
<!-- dependencies -->
<script src="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dependencies/JQL.min.js"></script>
<script src="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dependencies/typeahead.bundle.js"></script>
<script>
// เรียกใช้ jquery.Thailand.js
$.Thailand({
$district: $('#demo [name="district"]'),
$amphoe: $('#demo [name="amphoe"]'),
$province: $('#demo [name="province"]'),
$zipcode: $('#demo [name="zipcode"]'),
});
</script>
</body>
</html>
ที่มาครูสมชายคัดมาจาก : {getButton} $text={อ้างอิงที่มา} $icon={link} $color={red}
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.
I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
THANKS FOR VISITING thumariya.blogspot
Have a nice day!
-------------------------- -------------------------
ฉันจะพยายามระดับของฉันให้ดีที่สุดเพื่อแก้ไขปัญหา
ขอบคุณสำหรับการเยี่ยมชม thumariya.blogspot
ขอให้เป็นวันที่ดี!
-------------------------- -------------------------
{fullWidth}