Skip to content
This repository has been archived by the owner on Aug 31, 2023. It is now read-only.

biigpongsatorn/vue-thailand-address-autocomplete

Repository files navigation

⛔️ DEPRECATED This repo has not been maintained

NPM version NPM downloads License Demo Build Status

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 ☕️