Git Product home page Git Product logo

jquery.thailand.js's Introduction

Demo

https://earthchie.github.io/jquery.Thailand.js/

jquery.Thailand.js

ตัวช่วยกรอกที่อยู่ที่ดีที่สุดในไทย ไม่ต้องใช้ Server Side!

อ่านแนวคิด และที่มาที่ไปได้ที่นี่ ระบบ Auto Complete ที่อยู่ไทย อย่างที่มันควรเป็น

ต้องการปรับปรุงฐานข้อมูล?

คุณสามารถปรับปรุงข้อมูลได้ที่ raw_database.json จากนั้นนำไฟล์ที่แก้ไขแล้ว ไป compact ให้มีขนาดเล็กลงเพื่อให้นำไปใช้กับ Libary ได้ที่ Database Tools

Changelog 1.5.3.5

23 กันยายน 2018

  • ต.บางวัว อ.บางปะกง เปลี่ยนรหัสไปรษณีย์เป็น 24130

ปรับปรุงฐานข้อมูลตาม #29

  • ต.เกาะเต่า อ.เกาะพงัน เพิ่มรหัสไปรษณีย์ 84360
  • ต.ฉลอง, ต.ราไวย์ อ.เมืองภูเก็ต เพิ่มรหัสไปรษณีย์ 83130
  • ต.โคกม่วง อ.คลองหอยโข่ง เพิ่มรหัสไปรษณีย์ 90115

Changelog 1.5.3.4

27 กุมภาพันธ์ 2018

  • แขวงวังใหม่ เพิ่มรหัสไปรษณีย์ 10110 (อาคารเพลินจิตเซ็นเตอร์), 10120 (อาคารลุมพินีทาวเวอร์), 10400 (อาคารวิทยุคอมเพล็กซ์ และอื่นๆ), 10500 (ศาลแขวงปทุมวัน)
  • แขวงท่าแร้ง เพิ่มรหัสไปรษณีย์ 10230
  • แขวงหัวหมาก และสะพานสูง เพิ่มรหัสไปรษณีย์ 10250
  • แขวงพระโขนง เพิ่มรหัสไปรษณีย์ 10260
  • แขวงสวนจิตรลดา เพิ่มรหัสไปรษณีย์ 10303 (ภายในพระราชวังดุสิต)

Changelog 1.5.3.3

22 กุมภาพันธ์ 2018

  • ต.หนองเข็ง จ.บึงกาฬ เปลี่ยนชื่อเป็น ต.โนนสว่าง รายละเอียด
  • เพิ่มรหัสไปรษณีย์ 10240 ให้แก่แขวงคลองกุ่ม รายละเอียด
  • ต.อ่าวนาง จ.กระบี่ เปลี่ยนรหัสไปรษณีย์เป็น 81000 รายละเอียด

Changelog 1.5.3.2

25 มกราคม 2018

  • เพิ่มรหัสไปรษณีย์ 21150 ให้ตำบลเนินพระ จังหวัดระยอง รายละเอียด

Changelog 1.5.3.1

20 มกราคม 2018

  • เพิ่มแขวงทับช้าง แขวงราษฎร์พัฒนา (เขตสะพานสูง กทม.)

Changelog 1.5.3

20 ธันวาคม 2017

  • Update ปรับปรุงรหัสไปรษณีย์ อ.แก่งหางแมว จ. จันทบุรี เป็น 22160
  • Update ปรับปรุงรหัสไปรษณีย์ อ.วังเจ้า จ.ตาก เป็น 63180
  • Update ปรับปรุงรหัสไปรษณีย์ อ.บางเสาธง จ.สมุทรปราการ เป็น 10570
  • Update ย้าย ต.ท่าแฝก จ.อุตรดิตถ์ ออกจากอ.ท่าปลา ไปอยู่ อ.น้ำปาด
  • Enhancement กำหนดฐานข้อมูลให้อ่านไฟล์จาก GitHub CDN เป็นค่า default ทำให้ไม่จำเป็นต้องโฮสไฟล์ฐานข้อมูลเอง
  • Enhancement ลบโค้ดที่ไม่จำเป็นทิ้ง
  • Enhancement เปลี่ยนชื่อไฟล์ /database/raw_database/database.xls เป็น /database/raw_database/original_database_from_thaipost.xls
  • Enhancement เปลี่ยนชื่อไฟล์ /database/raw_database/database.json เป็น /database/raw_database/raw_database.json
  • Add เพิ่มเครื่องมือ build ฐานข้อมูลแบบ web-based Database Tools

อ่านทั้งหมดได้ที่ CHANGELOG.md

Todo

  • Clean up repo
  • Need help! with database #4
  • Need Tester on geodb data #4
  • Drop support for zip file, will use GZIP CDN instead.
  • English language database

วิธีใช้

ในส่วนนี้จะเป็นวิธีใช้อย่างคร่าวๆ หากต้องการรายละเอียดเพิ่มเติม กรุณาอ่านหัวข้อถัดไป

  1. ติดตั้ง Dependencies ให้ครบ
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dependencies/JQL.min.js"></script>
<script type="text/javascript" src="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dependencies/typeahead.bundle.js"></script>
    
  1. ติดตั้ง jquery.Thailand.js
<link rel="stylesheet" href="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dist/jquery.Thailand.min.css">
<script type="text/javascript" src="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dist/jquery.Thailand.min.js"></script>
  1. สร้าง input สำหรับกรอก ตำบล, อำเภอ, จังหวัด, รหัสไปรษณีย์
<input type="text" id="district">
<input type="text" id="amphoe">
<input type="text" id="province">
<input type="text" id="zipcode">
  1. เรียกใช้ jquery.Thailand.js วิธีใช้โดยละเอียด กรุณาอ่านหัวข้อถัดไป
$.Thailand({
    $district: $('#district'), // input ของตำบล
    $amphoe: $('#amphoe'), // input ของอำเภอ
    $province: $('#province'), // input ของจังหวัด
    $zipcode: $('#zipcode'), // input ของรหัสไปรษณีย์
});

ใน version 1.5.3 เป็นต้นมา คุณไม่จำเป็นต้องระบุฐานข้อมูล ตัว lib จะทำการเรียกใช้ฐานข้อมูลจาก GitHub CDN ให้อัตโนมัติ

วิธีใช้อย่างละเอียด

เรามีทางเลือกของฐานข้อมูลให้อยู่ 2 ประเภท คือฐานข้อมูลแบบ json และแบบ zip ในกรณีที่ Server ของคุณรองรับ gzip เราแนะนำเป็นอย่างยิ่งให้คุณใช้ฐานข้อมูลชนิด json

ทั้งสองแบบมีความแตกต่างกันที่แค่ขนาดไฟล์เป็นหลัก ไฟล์ฐานข้อมูลที่เล็กกว่า ย่อมทำให้ user ใช้เวลารอน้อยลง

นอกจากนี้การใช้ฐานข้อมูลแบบ zip จะมีข้อเสียเพิ่มเติมอีกเล็กน้อย ดังต่อไปนี้

  • ต้องใช้ resource ด้าน CPU และ RAM เพิ่มเล็กน้อย
  • ต้องเสียเวลาในการโหลด dependencies สำหรับแกะ zip เพิ่มอีก 3 ตัว ถึงแม้จะมีขนาดเล็ก แต่ก็เสียเวลาไปกับ latency ที่เกิดจาก HTTP Request อีกเล็กน้อยอยู่ดี

image

จากภาพนี้จะเห็นได้ว่า หากเป็นฐานข้อมูลชนิด json จะมีการโหลดไฟล์ db.json เพียงไฟล์เดียว ใช้เวลาเพียง 123ms เท่านั้น ในขณะที่ฐานข้อมูลชนิด zip จะต้องโหลดไฟล์หลายไฟล์ ใช้เวลารวมกันถึง 43+47+294+286 = 670ms ช้ากว่าแบบ json ถึงครึ่งวินาที

นอกจากนี้ หากพูดถึงเรื่องขนาด เรามาลองพิจารณาขนาดของฐานข้อมูลแบบ json ดูครับ

ขนาดของฐานข้อมูล

ไฟล์ ไม่มี gzip เปิดใช้ gzip
db.json 186.00 KB 68.90 KB

ผลลัพธ์อ้างอิงจากระบบ gzip ของ github page

จะเห็นได้ว่าหากเปิด gzip เอาไว้ ขนาดข้อมูลจะเล็กลงมากๆ เราขอแนะนำให้คุณใช้ทางเลือกนี้เสมอหากเป็นไปได้ แต่หากคุณไม่สามารถเปิดใช้ gzip ได้จริงๆ คุณก็สามารถเลือกใช้ฐานข้อมูลแบบ zip แทนได้ ซึ่งขนาดของฐานข้อมูลรวมตัวแกะ zip มีขนาดดังนี้

ไฟล์ ขนาดไฟล์
zip.js 12.40 KB
z-worker.js 2.00 KB
inflate.js 22.00 KB
db.zip 51.10 KB
รวม 87.50 KB

สรุปขนาดข้องมูล ตามประเภทของ Server

Server ประเภทฐานข้อมูลที่แนะนำ ขนาดฐานข้อมูล
รองรับ gzip json 68.90 KB
ไม่รองรับ gzip zip 87.50 KB

ตอนนี้คุณน่าจะตอบคำถามตัวเองได้แล้วว่าจะใช้ฐานข้อมูลประเภทไหน json หรือ zip เรามาดูวิธีใช้งานทั้งสองแบบกัน

หากคุณเลือกใช้ฐานข้อมูลชนิด JSON

  1. ติดตั้ง Dependencies ให้ครบ
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.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>
  1. ติดตั้ง jquery.Thailand.js
<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>
  1. สร้าง input สำหรับกรอก ตำบล, อำเภอ, จังหวัด, รหัสไปรษณีย์
<input type="text" id="district">
<input type="text" id="amphoe">
<input type="text" id="province">
<input type="text" id="zipcode">
  1. เรียกใช้ jquery.Thailand.js
$.Thailand({ 
    database: './jquery.Thailand.js/database/db.json', // path หรือ url ไปยัง database
    $district: $('#district'), // input ของตำบล
    $amphoe: $('#amphoe'), // input ของอำเภอ
    $province: $('#province'), // input ของจังหวัด
    $zipcode: $('#zipcode'), // input ของรหัสไปรษณีย์
});

หรือใช้งาน $.Thailand.setup() เพื่อกำหนดค่า default จะได้ไม่ต้องกำหนดค่าเดิมใหม่ซ้ำๆ ทุกครั้ง เช่น

    $.Thailand.setup({
        database: './jquery.Thailand.js/database/db.json'
    });

    // ไม่ต้องกำหนด path ของ database ซ้ำ
    $.Thailand({
        $search: $('#demo1 [name="search"]'),
        onDataFill: function(data){
            console.log(data)
        }
    });

    // ไม่ต้องกำหนด path ของ database ซ้ำเช่นกัน
    $.Thailand({
        $search: $('#demo2 [name="search"]'),
        onDataFill: function(data){
            console.log(data)
        }
    });

หากคุณเลือกใช้ฐานข้อมูลชนิด ZIP

ใช้งานแทบจะเหมือนกับแบบ json ทุกประการ เว้นแต่ว่าต้องติดตั้ง dependencies เพิ่ม คือ zip.js

  1. ติดตั้ง Dependencies ให้ครบ
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./jquery.Thailand.js/dependencies/zip.js/zip.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>
  1. ติดตั้ง jquery.Thailand.js
<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>
  1. สร้าง input สำหรับกรอก ตำบล, อำเภอ, จังหวัด, รหัสไปรษณีย์
<input type="text" id="district">
<input type="text" id="amphoe">
<input type="text" id="province">
<input type="text" id="zipcode">
  1. เรียกใช้ jquery.Thailand.js
$.Thailand({ 
    database: './jquery.Thailand.js/database/db.zip', // ฐานข้อมูลเป็นไฟล์ zip
    $district: $('#district'), // input ของตำบล
    $amphoe: $('#amphoe'), // input ของอำเภอ
    $province: $('#province'), // input ของจังหวัด
    $zipcode: $('#zipcode'), // input ของรหัสไปรษณีย์
});

การใช้งานโหมดค้นหา

image

โหมดค้นหาเป็นโหมดที่เพิ่มเข้ามาใหม่ในเวอร์ชัน 1.3.x ลักษณะของมันคือช่องกรอกข้อมูลที่รับ input มาจาก user แล้วนำไปค้นที่อยู่ให้

เมื่อ user ทำการเลือกที่อยู่แล้ว มันจะส่งข้อมูลทั้งหมดไปที่ callback onDataFill() ให้คุณนำไปจัดการต่อได้ตามสะดวก

$.Thailand({ 
    $search: $('#search'), // input ของช่องค้นหา
    onDataFill: function(data){ // callback เมื่อเกิดการ auto complete ขึ้น
        console.log(data);
    }
});

geodb

geodb คือฐานข้อมูลชนิดใหม่ โดยที่มีการเพิ่มข้อมูล Area Code เข้ามา สำหรับงานที่จำเป็นต้องใช้งานด้านแผนที่ #4 มีขนาดใหญ่กว่าฐานข้อมูลปกติเล็กน้อย สามารถสลับสับเปลี่ยนกับฐานข้อมูลปกติได้ทันที

เปรียบเทียบขนาดของฐานข้อมูล

ชนิด json

ไฟล์ ไม่มี gzip เปิดใช้ gzip
db.json 186.00 KB 68.90 KB
geodb.json 242.00 KB 91.20 KB
ใหญ่ขึ้น 56.00 KB 22.30 KB

ชนิด zip

ไฟล์ ไม่มี gzip
db.zip 51.10 KB
geodb.zip 68.50 KB
ใหญ่ขึ้น 17.40 KB

วิธีการใช้งาน สามารถทำได้ง่ายมาก เพียงเปลี่ยน url ของฐานข้อมูลไปเป็นแบบ geodb ก็เป็นอันเรียบร้อย

ตัวอย่าง

<input type="text" id="search">

<input type="text" id="district_code">
<input type="text" id="amphoe_code">
<input type="text" id="province_code">
$.Thailand({
    // เปลี่ยนไปใช้ geodb แทน จะเป็น geodb.json หรือ geodb.zip ก็ได้
    database: './jquery.Thailand.js/database/geodb.json', 

    $search: $('#search'),

    $district_code: $('#district_code'),
    $amphoe_code: $('#amphoe_code'),
    $province_code: $('#province_code'),

    onDataFill: function(data){
        console.log(data);
        /*
        ผลลัพธ์ที่ได้
        {
            district: '',
            district_code: '',
            amphoe: '',
            amphoe_code: '',
            province: '',
            province_code: '',
            zipcode: ''
        }
        */
    }
});

คำอธิบาย options ทั้งหมด

$.Thailand({ 
    
    // path หรือ url ไปยัง database เลือกได้ 4 แบบตามความเหมาะสม 
    // db.json, db.zip, geodb.json, geodb.zip
    database: './jquery.Thailand.js/database/db.json', 
    
    // auto, zip หรือ json; การใส่ auto ลงไป ระบบจะแยกแยะเอาเองตามนามสกุลของ database
    // (ไม่ระบุก็ได้ ค่า default คือ auto)
    database_type: 'auto', 
    
    // อ่านหัวข้อถัดไป
    // (ปกติไม่ต้องระบุ)
    zip_worker_path: false, 
    
    // ขนาดของตัวเลือกใน Dropdown 
    // (ไม่ระบุก็ได้ ค่า default คือ 20)
    autocomplete_size: 20, 
    
    // input ของตำบล
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $district: $('#district'), 
    
    // input area code ของตำบล
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $district_code: $('#district_code'), 
    
    // input ของอำเภอ
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $amphoe: $('#amphoe'), 
    
    // input area code ของอำเภอ
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $amphoe_code: $('#amphoe_code'), 
    
    // input ของจังหวัด
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $province: $('#province'), 
    
    // input area code ของจังหวัด
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $province_code: $('#province_code'), 
    
    // input ของรหัสไปรษณีย์
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $zipcode: $('#zipcode'), 
    
    // input ของช่องค้นหา 
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $search: $('#search'), 
    
    // 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/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#datasets
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    templates: {
        empty: ' ',
        suggestion: function (data) {
            if (data.zipcode) {
                data.zipcode = ' » ' + data.zipcode;
            }
            return '<div>' + data.district + ' » ' + data.amphoe + ' » ' + data.province + data.zipcode + '</div>';
        }
    }
});

zip_worker_path?

คือ path ที่เก็บไฟล์ z-worker.js และ inflate.js โดยปกติไม่จำเป็นต้องยุ่งกับค่านี้เลย ระบบจะ detect เอาเอง เว้นแต่ว่าจะพบ error แจ้งว่าหาไฟล์ z-worker.js และ inflate.js ไม่เจอ (ซึ่งไม่น่าเกิดขึ้นได้ เว้นแต่จะแยกไฟล์ zip.js ออกไปไว้คนละที่กัน) ถ้ามันแจ้ง error ว่าหาไฟล์ไม่เจอ ก็ค่อยให้ระบุค่าลงไป เช่น zip_worker_path: "./jquery.Thailand.js/dependencies/zip.js/",

Contributers

earthchie - Project Owner

dtinth - First accepted PR. Made a big improvement! Yay!

saknarak - First PR.

License

WTFPL 2.0 http://www.wtfpl.net/

Forks

jquery.thailand.js's People

Contributors

ayuthmang avatar dtinth avatar e20zip avatar earthchie avatar jdoe6 avatar komkanit avatar tanin-t avatar zapkub avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jquery.thailand.js's Issues

แก้ไข JQL loop array ใน Magento ได้ element เกิน

เจอปัญหาที่ตัว JQL นะครับ เวลา loop ด้วย for(var i in this.buffer) ใน Magento
เนื่องจาก this.buffer มันเป็น array (หรือ object) ทำให้ได้ prototype ของ object มาด้วย เกิน length ของ this.buffer

ตัวอย่าง ลองรันใน browser console - Magento เช่นเว็บ https://www.sysinfo.co.th/
var buffer = [123], obj = []; for (var i in buffer) obj.push(buffer[i]); console.log(obj);

มันควรได้ 1 element เท่านั้น แต่มันได้ 34
ไม่รู้ระบบมันไปแก้อะไรกับ array
https://grmark-gmail.tinytake.com/sf/MjU2MjMxN183NzA3OTI0

ผลคือได้ result เกิน เกิด undefined ใน hint
https://grmark-gmail.tinytake.com/sf/MjU2MjMzMF83NzA3OTYx

ให้แก้ไขการ loop ด้วย
for (var i=0; i<this.buffer.length; i++) แทนครับ

function this.fetch

             for (var i in this.buffer) {
                 obj[i] = {};
                 for (const j in this.options) {
                     const field = this.options[j];
                     if (this.buffer[i][field]) {
                         obj[i][field] = this.buffer[i][field];
                     }
                 }
             }

แก้เป็น

             for (var i=0; i<this.buffer.length; i++) {
                 obj[i] = {};
                 for (const j in this.options) {
                     const field = this.options[j];
                     if (this.buffer[i][field]) {
                         obj[i][field] = this.buffer[i][field];
                     }
                 }
             }

function this.orderBy
#จุดที่ 1

         // prepare object
         const obj = [];
         for (var i in this.buffer) {
             obj.push([i, this.buffer[i][field]]);
         }

แก้เป็น

         // prepare object
         const obj = [];
         for (var i=0; i<this.buffer.length; i++) {
             obj.push([i, this.buffer[i][field]]);
         }

#จุดที่ 2

         results = [];
         for (var i in obj) {
             results.push(this.buffer[obj[i][0]]);
         }

แก้เป็น

         results = [];
         for (var i=0;i<obj.length; i++) {
             results.push(this.buffer[obj[i][0]]);
         }

ขอบคุณครับ

ฐานข้อมูลจาก Kerry Express ครับ

Screen Shot 2019-05-16 at 4 11 35 PM

พอดีผมใช้งานเว็บไซต์ของ kerry express ที่เอาไว้ให้ลูกค้าสร้างใบปะหน้าก่อนที่จะเอาไปส่งที่สาขาแล้วผมก็เจอว่า เขามีการเรียก data ของตำบลมาทั้งหมดตอนแสดง suggestion บน textfield จาก url นี้ครับ
https://cms.th.kerryexpress.com/easyship/resources/subdistrict.json
คิดว่าน่าจะมีประโยชน์ในการ recheck หรือ update ฐานข้อมูลเพิ่มเติมครับ

Multi input

มีเรื่องมารบกวนอีกรอบครับ, ผมมีฟอร์มที่ต้องการใส่ที่อยู่สองครั้ง ครั้งแรกเป็นที่อยู่ตามบัตร ปชช. อีกอันเป็นที่อยู่ร้าน มีวิธีไหนที่ผมไม่ต้องสร้างไอดีสองครั้งมั้ยครับ?

ผมต้องการแสดงค่า response

โปรแกรมทำงานได้เร็วมากครับ ดีกว่า ajax ที่ผมใช้อยู่หลายปีแล้วหลายวินาที แต่ผมอยากปรับการแสดงผลหน่อยครับ ในฟังก์ชัน oncomplete ผมอยากให้แสดงผลว่ามันส่งอะไรมา โดยผมเขียนอย่างนี้แต่มันไม่ขึ้น ต้องทำอย่างไรครับ

            onComplete: function(data){
		console.log(data)
            }

Field Validation

ผมต้องการให้ค่าที่ส่งกลับมาแสดงในช่อง input เดิมที่ใช้ค้นหา เพื่อจะให้โปรแกรมตรวจสอบว่ามีการใส่ค่ามาหรือเปล่า ก่อนที่จะ submit แต่ลองใส่ id เดียวกับที่ค้นหาแล้วมันไม่แสดงค่าในช่องค้นหา แนะนำอย่างไรดีครับ? ปล.ผมใช้ bootstrap

Update ฐานข้อมูล

ถ้าผมต้องการจะช่วย Update ฐานข้อมูล จะต้องทำอย่างไรบ้างครับ
คือเห็นว่ามีโฟลเดอร์ raw_database และ tools อยู่แต่ไม่รู้ว่าจะต้องทำอย่างไรบ้างถึงจะ Update ตัว db.json ได้ครับ

การใช้งานมากกว่า 1 ฟอร์มขึ้นไป

ขอคำแนะนำในการใช้งานแบบ 1 ฟอร์มขึ้นไปครับเนื่องจากผมพบปัญหาชื่อตัวแปรซ้ำแล้วไม่ Auto Complete ให้
`
$.Thailand({
database: './jquery.Thailand.js/database/db.json',
$district: $('#district'),
$amphoe: $('#amphoe'),
$province: $('#province'),
$zipcode: $('#zipcode'),

$district: $('#district2'),
$amphoe: $('#amphoe2'),
$province: $('#province2'),
$zipcode: $('#zipcode2'),
});
`

ในตัว input มันเราไม่สามารถเคลียร์ค่า value ได้หรอคับเวลา onfocus

ผมลองแล้วค่ามันไม่หายไปเลยครับ สมมุติเราเลือกเขตจุตจักรไปแล้วอยากเคลียร์ค่ามันทิ้งด้วยการ focus ที่ textbox แต่ค่ามันก็ไม่หายไปเลยครับผม

เพิ่มรหัสไปรษณีย์ ต.ห้วยกะปิ จ.ชลบุรี

ต.ห้วยกะปิ จ.ชลบุรี รหัสไปรษณีย์ มี 2 เลขครับ คือ 20000 (มีอยู่แล้ว) และ 20130 (เพิ่มเติม)

{
"district": "ห้วยกะปิ",
"amphoe": "เมืองชลบุรี",
"province": "ชลบุรี",
"zipcode": 20130,
"district_code": 200115,
"amphoe_code": 2001,
"province_code": 20
},

อยากให้เพิ่ม code ของจังหวัดด้วยครับ

ขอบคุณมากครับสำหรับ project นี้ มีประโยชน์เวลากรอกที่อยู่บ้านมากครับ
ผมอยากให้มี code ของจังหวัดเพิ่มเข้ามาครับ จะง่ายต่อการใช้ geometric query มากครับ
อย่างเช่น

รหัสตำบล ชื่อตำบล
100101 พระบรมมหาราชวัง
100102 วังบูรพาภิรมย์
100103 วัดราชบพิธ
100104 สำราญราษฎร์
100105 ศาลเจ้าพ่อเสือ
100106 เสาชิงช้า
100107 บวรนิเวศ
รหัสอำเภอ ชื่ออำเภอ
1001 เขตพระนคร
1002 เขตดุสิต
1003 เขตหนองจอก
1004 เขตบางรัก
รหัสจังหวัด จังหวัด
10 กรุงเทพมหานคร
11 สมุทรปราการ

ขอบคุณครับ

english versions

มีไอเดีย ทำรหัสไปรษณีย์ เป็นภาษาอังกฤษด้วยไหมครับ ?

browser compatible

สวัสดีครับ
ก่อนอื่นต้องขอขอบคุณที่พัฒนา library ตัวนี้ขึ้นมาครับ

ตอนนี้สามารถใช้กับ Chrome, Firefox, Safari และ modern browser ได้อย่างไม่มีปัญหา
แต่สำหรับเว็บไซต์ที่ยังต้องรองรับขั้นต่ำ IE10 ไม่ทราบว่ามี solution ในการแก้ Syntax Error ของ JQL.min.js และ InvalidStateError ใน jquery.Thailand.min.js บ้างไหมครับ

ตอนนี้ line ที่ฟ้อง error คือ JQL.min.js Line:8 Column: 2647
และ jquery.Thailand.min.js Line: 13, Column:1711

ครับผม
ขอบคุณครับ
P.

Database Tools raw_database.json in English

คือลองแก้จาก raw_database.json ไฟล์เดิมที่มีข้อมูลเป็นภาษาไทย ให้เป็นภาษาอังกฤษ
แล้วนำมาบีบอัดลงโดยใช้ database tool คือไม่สามารถบีบอัดไฟล์ได้หรอคะ?

แยกแขวงบางนาออกเป็น บางนาเหนือ และ บางนาใต้

26 กรกฎาคม พ.ศ. 2560 แขวงบางนาเดิมในเขตบางนาได้แยกแขวงออกเป็น บางนาเหนือ และ บางนาใต้ แต่ในฐานข้อมูลยังมีแค่แขวงบางนาอย่างเดียวอยู่ รบกวนอัพเดทด้วยนะครับ ขอบคุณครับ

https://th.wikipedia.org/wiki/%E0%B9%80%E0%B8%82%E0%B8%95%E0%B8%9A%E0%B8%B2%E0%B8%87%E0%B8%99%E0%B8%B2

สอบถามเกี่ยวกับการติดตั้งใช้งานครับ

ผมสอบถามเกี่ยวกับการติดตั้งใช้งานหน่อยครับ ผมดาวน์โหลด ตัวโปรเจค จาก github โดยติดตั้งที่เครื่องจำลอง web โดยยังไม่ได้เปลี่ยนแปลงโค้ดใด ๆ รันผ่าน google chrome ระบบให้รอโหลดฐานข้อมูลดังภาพ ครับ ช่วยแนะนำ วิธีแก้ไข หรือวิธีติดตั้งที่ถูกต้องหน่อยครับ

image

เคลียร์ผลการค้นหาก่อนแสดงผลใหม่

สวัสดีครับ,
รบกวนอีกครั้ง ผมอยากให้ลบผลการค้นหาอันเก่า ก่อนที่จะมีการใส่ผลอันใหม่ลงใน #search ผมลองใช้ $('#search').html(''); แล้วก็ไม่เวิร์ค ไม่ทราบต้องทำยังไงครับ?

image

ฟังก์ชั่นไม่ทำงาน เมื่อใช้ร่วมกับ bootstrapValidator

ขอบคุณสำหรับการแบ่งปันนะครับ

ผมลองโหลดมาติดตั้งแล้ว แต่พบว่าฟังก์ชั่นไม่สามารถทำงานได้ ไม่ทราบว่าผมต้องประกาศหรือเพิ่มเติมอะไรอีกบ้างครับ

function bootstrapValidator
capture

เรียกใช้งาน jquery.Thailand.js
pic

อยากให้เพิ่มรหัสหมู่บ้าน ตามรหัสมาตรฐานพื้นที่ของมหาดไทยครับ

กระทรวงมหาดไทย ได้กำหนดรหัสมาตรฐานเขตการปกครองของไทย มีรหัสหมู่บ้าน 8 หลัก อยากให้เพิ่มเข้าไปครับ อาจทำไฟล์แยกจังหวัดด้วยก็ดีจะได้ไม่ใหญ่มาก ผมพยายามหาไฟล์ฐานข้อมูลแต่ไม่มี มีเฉพาะ PDF
http://www.moi.go.th/portal/page?_pageid=814,2111374&_dad=portal&_schema=PORTAL

Spelling of Arun Ammarin

Is Arun Ammarin อรุณอัมรินทร์ or บางกอกน้อย?

Wikipedia says the latter, but I'd trust a Kohn Thai more 😉

สอบถามครับ

ถ้าผมอยากให้มี scroll bar ในส่วนของ เมนู ต้องทำอย่างไรครับ

#มือใหม่หัดเขียนครับ

สอบถามเกี่ยวกับ raw_database.json

ใน file raw_database.json จะมีบางตัวที่
district_dode คืนค่า false แทนที่จะเป็น id ของ district
ไม่ทราบว่าแบบนี้ถูกต้องรึเปล่าครับผม

        "district": "เกาะพิทักษ์",
        "amphoe": "หลังสวน",
        "province": "ชุมพร",
        "zipcode": "",
        "district_code": false,
        "amphoe_code": 8604,
        "province_code": 86
    },...

กรอกใน DEMO ไม่ได้

ใช้ Safari พอกดไปที่ input แล้วมันก็เด้ง conbobox มาแปปหนึ่งแล้วก็หายไป พร้อมกับ unfocus ให้ด้วย เลยไม่สามารถกรอกข้อมูลได้เลย

ไม่แน่ใจว่าดู video ได้ไหม
VDO

Install in Bower or NPM?

This is a great project so I think it will benefit more people if this package is pushed to NPM or Bower. What do you guys think?

PS. This project saved me so much time! thx

raw_database.json ข้อมูลไม่สมบูรณ์ เช่น ของเขตวังทองหลาง กรุงเทพ

สวัสดีครับ ผมพบว่าข้อมูลในไฟล์ raw_database.json มีหลายจุดที่เป็น null ที่เจอคือหมายเลขของแขวงในเขตวังทองหลางหายไป 3 แขวง ส่วนอีกแขวงตัวเลขก็ไม่ใช่ตัวเลขปัจจุบันครับ

ต.หนองเข็ง เปลี่ยนชื่อ ต.โนนสว่าง ภายใต้อ.เมืองบึงกาฬ ใน จ.บึงกาฬ

สวัสดีครับ
พอดีผมได้นำ plugin ตัวนี้ไปใช้งานกับระบบที่พัฒนาขึ้น เนื่องจากผมต้องใช้ รหัสจังหวัด, รหัสอำเภอ, รหัสตำบล ด้วย แต่ตัว database geodb.json ในจังหวัด บึงกาฬ ไม่มีข้อมูลส่วนนี้ผมเลยต้องแก้ไขไฟล์ raw_database.json เพื่อใช้งานเอง ทำให้พบว่า ต.หนองเข็ง ได้เปลี่ยนชื่อ ต.โนนสว่าง แล้วตั้งแต่อยู่ภายใต้จังหวัดเดิม (หนองคาย) ผมพยายามหาข้อมูลมายืนยันความถูกต้อง เท่าที่เจอคือ
https://th.wikipedia.org/wiki/%E0%B8%AD%E0%B8%B3%E0%B9%80%E0%B8%A0%E0%B8%AD%E0%B9%80%E0%B8%A1%E0%B8%B7%E0%B8%AD%E0%B8%87%E0%B8%9A%E0%B8%B6%E0%B8%87%E0%B8%81%E0%B8%B2%E0%B8%AC
และ
http://www.ratchakitcha.soc.go.th/DATA/PDF/2554/D/084/2.PDF
เลยแจ้งมาเผื่อทีมงานจะได้แก้ไขครับ

ช่องค้นหาจำค่าเดิม

มีประเด็นมารบกวนอีกเรื่องนึงครับ คือเมื่อทำการค้นหาครั้งแรกไปแล้วแต่ยังไม่เปลี่ยนหน้า พอคลิกที่ช่องค้นหาอีกครั้ง โปรแกรมจะลิสต์รายการค้นหาล่าสุดลงมาเป็นดร็อปดาวน์อีกครั้งหนึ่งครับ จะต้องทำยังไงไม่ให้มันค้นหาซ้ำ/ให้เหมือนกับการรีเฟรช

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.