Vue Thailand Address Autocomplete 🇹🇭

Auto complete ที่อยู่ในประเทศไทยแบบสำเร็จรูป

Base on jquery.Thailand.js and thai-address-database

Very well database by @earthchie

Demo Page

Documentation & Demo Page

Install

npm install vue-thailand-address-autocomplete --save

หรือ

yarn add vue-thailand-address-autocomplete

Usage

import ThailandAutoComplete from 'vue-thailand-address-autocomplete'

Vue.component('ThailandAutoComplete', ThailandAutoComplete)

หรือ

import ThailandAutoComplete from 'vue-thailand-address-autocomplete'

export default {
  components: {
    ThailandAutoComplete
  }
}

Example

<template>
  <div>
    <ThailandAutoComplete
      v-model="district"
      type="district"
      @select="select"
      label="ตำบล"
      color="#42b883"
      size="default"
      placeholder="ตำบล..."/>

    <ThailandAutoComplete v-model="amphoe" type="amphoe" @select="select" label="อำเภอ" placeholder="อำเภอ..."/>

    <ThailandAutoComplete v-model="province" type="province" @select="select" label="จังหวัด" size="medium" color="#35495e" placeholder="จังหวัด..."/>

    <ThailandAutoComplete v-model="zipcode" type="zipcode" @select="select" size="large" color="#00a4e4" placeholder="รหัสไปรษณีย์..."/> 
  </div>
</template>

<script>
export default {
  data () {
    return {
      district: '',
      amphoe: '',
      province: '',
      zipcode: ''
    }
  },
  methods: {
    select (address) {
      this.district = address.district
      this.amphoe = address.amphoe
      this.province = address.province
      this.zipcode = address.zipcode
    }
  }
}
</script>

Options

Props

| Props | Type | Default | Description | | ----------- |:--------------| ----------|-------------------------------------------------------------------------| | v-model | String | - | Binding value | | type | String | - | ประเภทของ Field ประกอบด้วย district, amphoe, province, zipcode | | label | String | - | คำอธิบายของ Field | | placeholder | String | - | placeholder ของ Field | | color | String | - | สี border ของ Field ตอน Focus และสี background ของ List | | size | String |default | ขนาดของ Field ประกอบด้วย small, default, medium, large |

Events

| Events | Type | Default | Description | | ----------- |:--------------| ------------------|--------------------------------------------------------------------------------------------------| | select | Function | (address) => {} | Return address data (type object) when select address, คืนค่า Object ที่อยู่เมื่อเลือกที่อยู่จาก Autocomplete |

Contributing

1. Fork this repository.
2. Create new branch with feature name.
3. Run npm install and npm run dev.
4. Create your feature.
5. Commit and set commit message with feature name.
6. Push your code to your fork repository.
7. Create pull request. 🙂

Support

If you like this project, You can support me with starring ⭐ this project.

License

MIT

Developed with ❤️ and ☕️