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>