Vue-sug NPM | npm.io

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>