to v1.3.0

README.md

@@ -1,16 +1,24 @@
 # jquery.Thailand.js
 ตัวช่วยกรอกที่อยู่ที่ดีที่สุดในไทย ไม่ต้องใช้ Server Side!
 
-อ่านแนวคิด และที่มาที่ไปได้ที่นี่ https://medium.com/@earthchie/ระบบ-auto-complete-ที่อยู่ไทย-อย่างที่มันควรเป็น-27360185d86a
+อ่านแนวคิด และที่มาที่ไปได้ที่นี่ [ระบบ Auto Complete ที่อยู่ไทย อย่างที่มันควรเป็น](https://medium.com/@earthchie/ระบบ-auto-complete-ที่อยู่ไทย-อย่างที่มันควรเป็น-27360185d86a)
 
-# Todo
-- Clean up repo
-- Need help! with database https://github.com/earthchie/jquery.Thailand.js/issues/4
+## Changelogs 1.3.0
+- อัพเดตจาก 1.2.0
+- เพิ่ม callback onDataFill() ตาม [request](https://github.com/earthchie/jquery.Thailand.js/issues/9)
+- แก้บัค ฟิลด์ข้อมูลไม่ยิง event change เมื่อเกิด autocomplete แล้ว (สำหรับตัวอย่างเพิ่มเติม ดูโค้ดใน [Demo](https://earthchie.github.io/jquery.Thailand.js/))
+- จัดระเบียบโครงสร้างโปรเจค และลบไฟล์ที่ไม่จำเป็นทิ้ง
+- เพิ่มฐานข้อมูลต้นฉบับ เป็นไฟล์ .xls อัพเดตข้อมูลล่าสุด เดือนตุลา 2559
+- ฟิลด์ใหม่ ``$search`` ใช้สำหรับค้นหา ดูตัวอย่างได้จากโค้ดใน [Demo](https://earthchie.github.io/jquery.Thailand.js/)
+
+## Todo
+- [x] Clean up repo
+- [ ] Need help! with database https://github.com/earthchie/jquery.Thailand.js/issues/4
 
 # Demo
-https://earthchie.github.io/jquery.Thailand.js/
+[https://earthchie.github.io/jquery.Thailand.js/](https://earthchie.github.io/jquery.Thailand.js/)
 
-# วิธีใช้
+## วิธีใช้
 
 1. ติดตั้ง Dependency ให้ครบ
 
@@ -23,8 +31,8 @@ https://earthchie.github.io/jquery.Thailand.js/
 2. ติดตั้ง jquery.Thailand.js
 
 ```html
-<link rel="stylesheet" href="jquery.Thailand.js/jquery.Thailand.min.css">
-<script type="text/javascript" src="jquery.Thailand.js/jquery.Thailand.min.js"></script>
+<link rel="stylesheet" href="./jquery.Thailand.js/dist/jquery.Thailand.min.css">
+<script type="text/javascript" src="./jquery.Thailand.js/dist/jquery.Thailand.min.js"></script>
 ```
 
 3. สร้าง input สำหรับกรอก ตำบล, อำเภอ, จังหวัด, รหัสไปรษณีย์
@@ -41,14 +49,21 @@ https://earthchie.github.io/jquery.Thailand.js/
 ```javascript
 
 $.Thailand({ 
-    database: './jquery.Thailand.js/db.zip', // path หรือ url ไปยัง zip
-    autocomplete_size: 10, // ถ้าไม่ระบุ ค่า default คือ 20
-    $district: $('#district'),
-    $amphoe: $('#amphoe'),
-    $province: $('#province'),
-    $zipcode: $('#zipcode'),
-    onComplete: function(){
-        console.log('Autocomplete is ready!')
+
+    database: './jquery.Thailand.js/dist/db.json', // path หรือ url ไปยัง zip
+    autocomplete_size: 10, // ขนาดของตัวเลือก ถ้าไม่ระบุ ค่า default คือ 20
+
+    $district: $('[name="district"]'), // input ของตำบล
+    $amphoe: $('[name="amphoe"]'), // input ของอำเภอ
+    $province: $('[name="province"]'), // input ของจังหวัด
+    $zipcode: $('[name="zipcode"]'), // input ของรหัสไปรษณีย์
+
+    onDataFill: function(data){ // callback เมื่อเกิดการ auto complete ขึ้น
+        console.info('Data Filled', data);
+    },
+
+    onLoad: function(){ // callback เมื่อโหลดฐานข้อมูลเสร็จและระบบ Auto Complete พร้อมที่จะทำงาน
+        console.info('Autocomplete is ready!');
     }
 });
 
@@ -58,7 +73,7 @@ $.Thailand({
 
 ใน [v1.1.0](https://github.com/earthchie/jquery.Thailand.js/tree/fe302996ca72f156e1542048419399484431c391) เป็นต้นมามีการปรับเปลี่ยนโครงสร้างข้อมูล ภายใต้สมมุติฐานว่า Server รองรับ gzip รายละเอียดดังนี้
 
-| ไฟล์ | ขนาดเมื่อถูก Gzip |
+| ไฟล์ | ขนาดเมื่อถูก gzip |
 | --- | ---:|
 | JQL.min.js | 1.3 KB |
 | typeahead.bundle.js | 14.6 KB |

index.html

@@ -9,10 +9,10 @@
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.20/css/uikit.css">
-    <link rel="stylesheet" href="jquery.Thailand.js/jquery.Thailand.min.css">
+    <link rel="stylesheet" href="./jquery.Thailand.js/dist/jquery.Thailand.min.css">
 
     <style>
-        a, h1, .h2{
+        a, h1, h2, .h2{
             font-family: 'Kanit', sans-serif !important;
             line-height: 1.6em;
         }
@@ -30,13 +30,14 @@
 
     <div class="uk-container uk-padding">
 
+        <!-- DEMO 1 -->
         <h1>Auto Complete ที่อยู่ อย่างที่มันควรเป็น</h1>
 
         <div id="loader">
             <div uk-spinner></div> รอสักครู่ กำลังโหลดฐานข้อมูล...
         </div>
 
-        <div id="address" style="display:none;" uk-grid>
+        <form id="demo1" class="demo" style="display:none;" autocomplete="off" uk-grid >
 
             <div class="uk-width-1-2@m">
                 <label class="h2">ตำบล</label>
@@ -58,7 +59,20 @@ <h1>Auto Complete ที่อยู่ อย่างที่มันคว
                 <input name="zipcode" class="uk-input uk-width-1-1" type="text">
             </div>
 
-        </div>
+        </form>
+        <!-- END DEMO 1 -->
+
+        <!-- DEMO 2 -->
+        <hr>
+        <h2>ใหม่! โหมดค้นหา</h2>
+        <form id="demo2" class="demo" style="display:none;" autocomplete="off">
+            <label class="h2">ค้นหาที่อยู่ของคุณ</label>
+            <small>ลองกรอกอย่างใดอย่างหนึ่ง ตำบล, อำเภอ, จังหวัด หรือ รหัสไปรษณีย์</small>
+            <input name="search" class="uk-input uk-width-1-1" type="text">
+
+            <div id="demo2-output" class="uk-margin"></div>
+        </form>
+        <!-- END DEMO 2 -->
 
         <div uk-grid>
             <div class="uk-width-1-2@m">
@@ -83,24 +97,70 @@ <h1>Auto Complete ที่อยู่ อย่างที่มันคว
                 </a>
             </div>
         </div>
+
     </div>
 
     <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
-
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.20/js/uikit.min.js"></script>
+    <script type="text/javascript" src="./jquery.Thailand.js/dependencies/JQL.min.js"></script>
+    <script type="text/javascript" src="./jquery.Thailand.js/dependencies/typeahead.bundle.js"></script>
 
-    <script type="text/javascript" src="jquery.Thailand.js/dependencies/JQL.min.js"></script>
-    <script type="text/javascript" src="jquery.Thailand.js/dependencies/typeahead.bundle.js"></script>
-
-    <script type="text/javascript" src="jquery.Thailand.js/jquery.Thailand.min.js"></script>
+    <script type="text/javascript" src="./jquery.Thailand.js/dist/jquery.Thailand.min.js"></script>
 
     <script type="text/javascript">
+
+        /******************\
+         *     DEMO 1     *
+        \******************/ 
         $.Thailand({
-            database: 'jquery.Thailand.js/data3.json',
-            onComplete: function(){
-                $('#loader, #address').toggle();
+            database: './jquery.Thailand.js/dist/db.json',
+
+            $district: $('#demo1 [name="district"]'),
+            $amphoe: $('#demo1 [name="amphoe"]'),
+            $province: $('#demo1 [name="province"]'),
+            $zipcode: $('#demo1 [name="zipcode"]'),
+
+            onDataFill: function(data){
+                console.info('Data Filled', data);
+            },
+
+            onLoad: function(){
+                console.info('Autocomplete is ready!');
+                $('#loader, .demo').toggle();
             }
         });
+
+        // watch on change
+
+        $('#demo1 [name="district"]').change(function(){
+            console.log('ตำบล', this.value);
+        });
+        $('#demo1 [name="amphoe"]').change(function(){
+            console.log('อำเภอ', this.value);
+        });
+        $('#demo1 [name="province"]').change(function(){
+            console.log('จังหวัด', this.value);
+        });
+        $('#demo1 [name="zipcode"]').change(function(){
+            console.log('รหัสไปรษณีย์', this.value);
+        });
+
+
+        /******************\
+         *     DEMO 2     *
+        \******************/ 
+
+        $.Thailand({
+            database: './jquery.Thailand.js/dist/db.json',
+            $search: $('#demo2 [name="search"]'),
+
+            onDataFill: function(data){
+                var html = '<b>ที่อยู่:</b> ตำบล' + data.district + ' อำเภอ' + data.amphoe + ' จังหวัด' + data.province + ' ' + data.zipcode;
+                $('#demo2-output').prepend('<div class="uk-alert-warning" uk-alert><a class="uk-alert-close" uk-close></a>' + html + '</div>');
+            }
+
+        });
+
     </script>
 
 </body>