vue-sug/README.md

handle your input , handle your suggests

you can create optional your input with your suggests 

**autocomplete will be added soon**

**Demo:**  [http://byParsa.me/Plugins/vue-sug](http://byParsa.me/Plugins/vue-sug)

## vue-sug
### Install

    npm install vue-sug --save

## Import

### Globally : 
Import plugin in your  `main.js`  file globally.

    import vueSug from  'vue-sug';
    Vue.use(vueSug)
    /*
    
    Example:
    
    Vue.use(vueSug, { color: "white" 
	, bgColor:"red"
		...
	  })
    
    ...
    
    <vue-sug :color="'white'"></vue-sug>
    
    */
### Locally : 
Import plugin in your `component` directly.

    import { vueSuggestion } from  'vue-sug'
    
    export  default {
    
	    components:{
		    vueSuggestion
		}
    }
    <vue-suggestion :color="'white'"></vue-suggestion>

## Props:

|Name|Type|Default|Description|
|--|--|--|--|
| `suggests` | String | *inExample | `color` define input text and icon color|
| `color` | String | gray | `color` define input text and icon color|
|`bgColor`|String | transparent |`bgColor` property allows you change the background color if you want|
|`startAt`|Number|3|`startAt` property shows after how many charecters suggestions start 
|`placeHolder`|String|Enter what you want|`placeHolder` property allows you change the input placeholder
`iconClass`|String|fa fa-search| `icon` property allows you to use the fontawesome icons with class name , you can use custom classes too 


## EventEmmiters

@click > at icon click
@itemClick > at suggests click


## :suggests structure


## Example:
	<template>
		<div>
		/* imported globally */
			<vue-sug
			:color="'white'"
			:suggests="yourArray"
			v-model="string"
			@click="search()"
			@itemClick="select($index)"
			></vue-sug>
		</div>
	</template>
	<script>
	export  default {
		data(){
			return{
				string:'',
				yourArray:[
					{
						sugTitle:'FirstItem',
						sugDesc: 'description 1',
						sugStatus:'status1',
						//More values ..
					} , {
						sugTitle:'SecondItem',
						sugDesc: 'description 2',
						sugStatus:'status2',
						//More values ..
					} , {
						sugTitle:'ThirdItem',
						sugDesc: 'description 2',
						sugStatus:'status3',
						//More values ..
					}
							]
						}
					}
				},
		methods:{
			search(){
			//this method triggered when you click on icon
			}
			select(i){
			//this method triggered when you click on a suggest and returns index  of suggest
			}
		}
	</script>