vue-sug

you can create optional your input with your suggests

autocomplete will be added soon

Demo: 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>