PHPackages                             totza2010/thailand-address-typeahead - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. totza2010/thailand-address-typeahead

ActiveLibrary[Utility & Helpers](/categories/utility)

totza2010/thailand-address-typeahead
====================================

ตัวช่วยกรอกข้อมูลจังหวัด อำเภอ ตำบล ของประเทศไทย

1.0.1(2y ago)03HTML

Since Jan 16Pushed 2y agoCompare

[ Source](https://github.com/totza2010/ThailandAddressTypeahead)[ Packagist](https://packagist.org/packages/totza2010/thailand-address-typeahead)[ RSS](/packages/totza2010-thailand-address-typeahead/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (2)Dependencies (1)Versions (2)Used By (0)

Demo
====

[](#demo)

[Demo](https://jsfiddle.net/totza2010/mcv7w2rz/show)

ThailandAddressTypeahead
------------------------

[](#thailandaddresstypeahead)

ตัวช่วยกรอกข้อมูลจังหวัด อำเภอ ตำบล รหัสไปรษณี ของประเทศไทย โดยได้รับแรงบันดาลใจมาจาก  โดยใช้ฐานข้อมูล จังหวัด อำเภอ ตำบล รหัสไปรษณี ของประเทศไทย จาก

วิธีใช้
=======

[](#วิธีใช้)

1. ติดตั้ง Dependencies

```

```

2. ติดตั้ง ThailandAddressTypeahead

```

```

3. สร้าง input สำหรับกรอก ตำบล, อำเภอ, จังหวัด, รหัสไปรษณีย์ 3.1 สำหรับ input ข้อมูลภาษาไทย

```

```

3.2 สำหรับ input ข้อมูลภาษาอังกฤษ

```

```

4. เรียกใช้ ThailandAddressTypeahead 4.1 สำหรับตั้งค่า ข้อมูลภาษาไทย

```
$.Address({
    $tambon_th: $('#tambon_th'), // input ของตำบล
    $amphure_th: $('#amphure_th'), // input ของอำเภอ
    $province_th: $('#province_th'), // input ของจังหวัด
    $zipcode: $('#zipcode'), // input ของรหัสไปรษณีย์
});
```

4.2 สำหรับตั้งค่า ข้อมูลภาษาอังกฤษ

```
$.Address({
    $tambon_en: $('#tambon_en'), // input ของตำบล
    $amphure_en: $('#amphure_en'), // input ของอำเภอ
    $province_en: $('#province_en'), // input ของจังหวัด
    $zipcode: $('#zipcode'), // input ของรหัสไปรษณีย์
});
```

4.3 สำหรับตั้งค่าข้อมูลทั้งสองภาษา

```
$.Address({
    $tambon_th: $('#tambon_th'), // input ของตำบล
    $amphure_th: $('#amphure_th'), // input ของอำเภอ
    $province_th: $('#province_th'), // input ของจังหวัด
    $tambon_en: $('#tambon_en'), // input ของตำบล
    $amphure_en: $('#amphure_en'), // input ของอำเภอ
    $province_en: $('#province_en'), // input ของจังหวัด
    $zipcode: $('#zipcode'), // input ของรหัสไปรษณีย์
});
```

4.3 กำหนดค่า Database จากภายนอก

```
$.Address({
    database: './ThailandAddressTypeahead/database/db.json', // path หรือ url ไปยัง database
    $tambon_th: $('#tambon_th'), // input ของตำบล
    $amphure_th: $('#amphure_th'), // input ของอำเภอ
    $province_th: $('#province_th'), // input ของจังหวัด
    $tambon_en: $('#tambon_en'), // input ของตำบล
    $amphure_en: $('#amphure_en'), // input ของอำเภอ
    $province_en: $('#province_en'), // input ของจังหวัด
    $zipcode: $('#zipcode'), // input ของรหัสไปรษณีย์
});
```

\*\*\* Database ที่ใช้ต้องมี Format ตามนี้เท่านั้น

```
[
  {
    "id": 1,
    "name_th": "กรุงเทพมหานคร",
    "name_en": "Bangkok",
    "geography_id": 2,
    "created_at": "2019-08-09T03:33:09.000+07:00",
    "updated_at": "2022-05-16T06:31:03.000+07:00",
    "deleted_at": null,
    "amphure": [
      {
        "id": 1001,
        "name_th": "เขตพระนคร",
        "name_en": "Khet Phra Nakhon",
        "province_id": 1,
        "created_at": "2019-08-09T03:33:09.000+07:00",
        "updated_at": "2022-05-16T06:31:26.000+07:00",
        "deleted_at": null,
        "tambon": [
          {
            "id": 100101,
            "zip_code": 10200,
            "name_th": "พระบรมมหาราชวัง",
            "name_en": "Phra Borom Maha Ratchawang",
            "amphure_id": 1001,
            "created_at": "2019-08-09T03:33:09.000+07:00",
            "updated_at": "2022-05-16T06:31:31.000+07:00",
            "deleted_at": null
          }
        ]
      }
    ]
  }
]

```

\*\*\* ใช้งาน `$.Address.setup()` เพื่อกำหนดค่า default

```
    $.Address.setup({
        database: './ThailandAddressTypeahead/database/db.json'
    });

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

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

ช่อง input ค้นหารวม
-------------------

[](#ช่อง-input-ค้นหารวม)

[![image](https://cloud.githubusercontent.com/assets/7013039/25127003/642fa330-245e-11e7-9f0b-ab1d3f6e3085.png)](https://cloud.githubusercontent.com/assets/7013039/25127003/642fa330-245e-11e7-9f0b-ab1d3f6e3085.png)

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

geodb
-----

[](#geodb)

geodb คือข้อมูล Area Code ของแต่ละพื้นที่

```
$.Address({
    database: './ThailandAddressTypeahead/database/db.json',

    $search: $('#search'),

    $tambon_id: $('#tambon_id'),
    $amphure_id: $('#amphure_id'),
    $province_id: $('#province_id'),

    onDataFill: function(data){
        console.log(data);
        /*
        ผลลัพธ์ที่ได้
        {
            tambon_id: '',
            tambon_th: '',
            tambon_en: '',
            amphure_id: '',
            amphure_th: '',
            amphure_en: '',
            province_id: '',
            province_th: '',
            province_en: '',
            zipcode: ''
        }
        */
    }
});
```

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

[](#คำอธิบาย-options-ทั้งหมด)

```
$.Address({

    // path หรือ url ไปยัง database
    database: './ThailandAddressTypeahead/database/db.json',

    // ขนาดของตัวเลือกใน Dropdown
    // (ไม่ระบุก็ได้ ค่า default คือ 20)
    autocomplete_size: 20,

    // input area code ของตำบล
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $tambon_id: $('#tambon_id'),

    // input ของตำบลภาษาไทย
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $tambon_th: $('#tambon_th'),

    // input ของตำบลภาษาอังกฤษ
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $tambon_en: $('#tambon_en'),

    // input area code ของอำเภอ
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $amphure_id: $('#amphure_id'),

    // input ของอำเภอภาษาไทย
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $amphure_th: $('#amphure_th'),

    // input ของอำเภอภาษาอังกฤษ
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $amphure_en: $('#amphure_en'),

    // input area code ของจังหวัด
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $province_id: $('#province_id'),

    // input ของจังหวัดภาษาไทย
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $province_th: $('#province_th'),

    // input ของจังหวัดภาษาอังกฤษ
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $province_en: $('#province_en'),

    // input ของรหัสไปรษณีย์
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $zipcode: $('#zipcode'),

    // input ของช่องค้นหา
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    $search: $('#search'),

    // ภาษาของช่องค้นหา
    // (ไม่ระบุก็ได้ ค่าเริ่มต้นคือ ภาษาไทย)
    lang: "th",

    // 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/corejavascript/typeahead.js/blob/master/doc/jquery_typeahead.md#datasets
    // (ไม่ระบุก็ได้หากไม่จำเป็นต้องใช้)
    templates: {
        empty: " ",
        suggestion: entry => {
            // Format the suggestion entry for display
            let tambon = entry.tambon;
            let amphure = entry.amphure;
            let province = entry.province;
            let zipcode = entry.zipcode;
            return `${tambon} --> ${amphure} --> ${province} --> ${zipcode}`;
        },
    }
});
```

Original fork and idea
----------------------

[](#original-fork-and-idea)

[earthchie](https://github.com/earthchie/) - Project Owner, Original fork

License
-------

[](#license)

WTFPL 2.0

###  Health Score

20

—

LowBetter than 14% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity3

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 92.2% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

847d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/8fb6a32baf846465e5636fce9342e995d8a05ade0d3f7d517aba4af5f65f877a?d=identicon)[totza2010](/maintainers/totza2010)

---

Top Contributors

[![earthchie](https://avatars.githubusercontent.com/u/7013039?v=4)](https://github.com/earthchie "earthchie (166 commits)")[![totza2010](https://avatars.githubusercontent.com/u/13436403?v=4)](https://github.com/totza2010 "totza2010 (4 commits)")[![dtinth](https://avatars.githubusercontent.com/u/193136?v=4)](https://github.com/dtinth "dtinth (3 commits)")[![komkanit](https://avatars.githubusercontent.com/u/11961997?v=4)](https://github.com/komkanit "komkanit (2 commits)")[![ayuthmang](https://avatars.githubusercontent.com/u/6449655?v=4)](https://github.com/ayuthmang "ayuthmang (1 commits)")[![zapkub](https://avatars.githubusercontent.com/u/4373581?v=4)](https://github.com/zapkub "zapkub (1 commits)")[![e20zip](https://avatars.githubusercontent.com/u/4455042?v=4)](https://github.com/e20zip "e20zip (1 commits)")[![jdoe6](https://avatars.githubusercontent.com/u/63280846?v=4)](https://github.com/jdoe6 "jdoe6 (1 commits)")[![tanin-t](https://avatars.githubusercontent.com/u/15776810?v=4)](https://github.com/tanin-t "tanin-t (1 commits)")

### Embed Badge

![Health badge](/badges/totza2010-thailand-address-typeahead/health.svg)

```
[![Health](https://phpackages.com/badges/totza2010-thailand-address-typeahead/health.svg)](https://phpackages.com/packages/totza2010-thailand-address-typeahead)
```

###  Alternatives

[antoineaugusti/easyphpcharts

A PHP class for chartjs.org charts.

252.8k](/packages/antoineaugusti-easyphpcharts)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)