Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

vue-thailand-address-autocomplete

Package Overview
Dependencies
3
Maintainers
1
Versions
10
Issues
File Explorer

Advanced tools

vue-thailand-address-autocomplete

Vue autocomplete component for Thailand address. 🇹🇭

    0.1.1latest

Version published
Maintainers
1
Yearly downloads
8,671
increased by32.75%

Weekly downloads

Readme

Source

Buy Me A Coffee

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

PropsTypeDefaultDescription
v-modelString-Binding value
typeString-ประเภทของ Field ประกอบด้วย district, amphoe, province, zipcode
labelString-คำอธิบายของ Field
placeholderString-placeholder ของ Field
colorString-สี border ของ Field ตอน Focus และสี background ของ List
sizeStringdefaultขนาดของ Field ประกอบด้วย small, default, medium, large

Events

EventsTypeDefaultDescription
selectFunction(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 ☕️

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc