to z1.3.1

README.md

@@ -7,8 +7,19 @@ Branch นี้เหมาะสำหรับ Server ที่ไม่ร
 
 อ่านแนวคิด และที่มาที่ไปได้ที่นี่ https://medium.com/@earthchie/ระบบ-auto-complete-ที่อยู่ไทย-อย่างที่มันควรเป็น-27360185d86a
 
+## Changelogs 1.3.1
+- เพิ่ม 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/)
 
 # วิธีใช้
 
@@ -43,42 +54,43 @@ 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.zip', // 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!');
     }
 });
 
 ```
 
-## Performance
+## ขนาดของข้อมูล
 
 ใน [v1.1.0](https://github.com/earthchie/jquery.Thailand.js/tree/fe302996ca72f156e1542048419399484431c391) เป็นต้นมามีการปรับเปลี่ยนโครงสร้างข้อมูล ภายใต้สมมุติฐานว่า Server รองรับ gzip รายละเอียดดังนี้
 
 | ไฟล์ | ขนาดเมื่อถูก Gzip |
 | --- | ---:|
-| JQL.min.js | 1.3 KB |
-| typeahead.bundle.js | 14.6 KB |
-| jquery.Thailand.min.js | 1.2 KB |
 | data.json | 57.4 KB |
-| **รวม** | **74.5 KB** |
+| **รวม** | **57.4 KB** |
 
 แต่หากท่านใดที่ Server ไม่รองรับ gzip สามารถใช้ [zipped version](https://github.com/earthchie/jquery.Thailand.js/tree/zipped_version) แทนได้ โดยมีรายละเอียดดังนี้
 
 | ไฟล์ | ขนาดไฟล์ |
 | --- | ---:|
 | jszip.min.js | 99.5 KB |
 | jszip-utils.min.js | 1.7 KB |
-| JQL.min.js | 3.1 KB |
-| typeahead.bundle.js | 43.4 KB |
-| jquery.Thailand.min.js | 2.6 KB |
 | db.zip | 50.7 KB |
-| **รวม** | **201 KB** |
+| **รวม** | **151.9 KB** |
 
 ## Contributers
 [earthchie](https://github.com/earthchie/) - Project Owner

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">
@@ -89,19 +103,63 @@ <h1>Auto Complete ที่อยู่ อย่างที่มันคว
 
     <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/jszip.min.js"></script>
-    <script type="text/javascript" src="jquery.Thailand.js/dependencies/jszip-utils.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/jszip.min.js"></script>
+    <script type="text/javascript" src="./jquery.Thailand.js/dependencies/jszip-utils.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/jquery.Thailand.js"></script>
+    <script type="text/javascript" src="./jquery.Thailand.js/dist/jquery.Thailand.min.js"></script>
 
     <script type="text/javascript">
-        $.Thailand({ 
-            database: 'jquery.Thailand.js/db.zip',
-            onComplete: function(){
-                $('#loader, #address').toggle();
+        /******************\
+         *     DEMO 1     *
+        \******************/ 
+        $.Thailand({
+            database: './jquery.Thailand.js/dist/db.zip',
+
+            $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.zip',
+            $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>