ระบบ Auto Complete ที่อยู่ไทย ตำบล / แขวง , อำเภอ / เขต , จังหวัด , รหัสไปรษณีย์ อย่างที่ควรจะเป็น

สามารถ Download ตัวอย่าง Code ทั้งหมดได้ที่ https://github.com/earthchie/jquery.Thailand.js

Code View

<link rel="stylesheet" href="../assets/system/jquery.Thailand.js/dist/jquery.Thailand.min.css">

<input type="text" name="district" id="district" placeholder="กรุณากรอก ตำบล / แขวง">

<input type="text" name="amphoe" id="amphoe" placeholder="กรุณากรอก อำเภอ / เขต">

<input type="text" name="province" id="province" placeholder="กรุณากรอก จังหวัด">

<input type="text" name="zipcode" id="zipcode" placeholder="กรุณากรอก รหัสไปรษณีย์">

<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="../assets/system/jquery.Thailand.js/dependencies/JQL.min.js"></script>

<script type="text/javascript" src="../assets/system/jquery.Thailand.js/dependencies/typeahead.bundle.js"></script>

<script type="text/javascript" src="../assets/system/jquery.Thailand.js/dist/jquery.Thailand.min.js"></script>

<script>

    $.Thailand({

        database: '../assets/system/jquery.Thailand.js/database/db.json', 

        $district: $('#district'),

        $amphoe: $('#amphoe'),

        $province: $('#province'),

        $zipcode: $('#zipcode'),

        onDataFill: function(data){

            console.info('Data Filled', data);

        },

        onLoad: function(){

            console.info('Autocomplete is ready!');

            $('#loader, .demo').toggle();

        }

    });

</script>

ที่มาโดย : https://earthchie.github.io/jquery.Thailand.js/