Vue Autocompletion

Installation via NPM

First

Install via NPM

npm i vue-autocompletion --save-dev

or

npm i  vue-autocompletion --save

Second

Require in your project:

var VueAutocompletion = require('vue-autocompletion');

or ES6 syntax:

import VueAutocompletion from 'vue-autocompletion'

Third

You can register the component globally:

Vue.component('autocomplete', VueAutocompletion);

Or locally in a single Vue component:

 components: { 'autocomplete':VueAutocompletion },

All Available Props for vue-autocompletion

Prop	Type	Default	Description
keyField	String	id	id for the hidden input / your expected object key i.e. id:xxx
valueField	String	name	the value that is set for your expected object value i.e. name:xxx
remoteKey	String	*keyField	the value that is set for your expected object key i.e. {id:xxx}
remoteValue	String	*valueField	the value that is set for your expected object value i.e. {name:xxx}
remotePrimaryValue	String	-	if defined it will look for this as highest choice in search from remote. Difficult to explain but remote data may be dynamic and sometimes may include cityName other times countryName so remoteKey would be preferred in this instance cityName if not found then it will fall back to remoteValue which be countryName as other choice
remoteValueSelect	String	-	the actual value to select if remoteValue is shown as selectable item {what appears after selection} is also set as expected object value
clazz	String	-	css classes to load if additional css styling needed
returnPromise	Boolean	false	return entire object - this is for more complex objects that have many other things you need to do with returned data
placeholder	String	name	the value that is set for a blank auto complete box
selected	Object	{}	The actual selected object when user chooses one of drop down - emited back to parent call overwriting parent key/value fields
name	String	-	The name of select field must match object name that is being saved for validation to work or valueField name
searchLength	Number	3	Amount of characters before triggering dropdown
items	Array	[]	parent's array of selectable objects - can be fixed or db driven - key presses by user trigger list to update
isAsync	Boolean	false	unused feature came with original guide
disabled	Boolean	false	set to true to disable selectable area
readonly	Boolean	false	set to true to make area non selectable and readonly
overrideClearFunction	Boolean	false	set to true to override html 5 x that appears in input and use plugins version. This may be needed depending on vue object modelling.
additionalProperties	Array	[]	A list of additional objects to set or clear in one go refer to example 8 [{valueField:'countryName', remoteValue:'countryName', keyField:'countryCode', remoteKey:'countryCode'}, {objectName:'subObject', keyField:'countryId', remoteKey:'countryCode' }, {valueField:'state'}, {keyField:'countryId', remoteKey:'countryCode' }, ]
setTimeOut	Boolean	false	enable setTimeOut not needed for validation call - non validation may be needed
timeOutPeriod	Number	300	Time out in milliseconds default should be sufficient

All Available Props for vue-autocompletion-valid (above + below)

Prop	Type	Default	Description
validationErrors	Array	[]	returns any vee-validate validation issues back to caller
validation	String	-	the validation types required i.e. 'required

Events

Event	Description
@key-press	Fired when the input text changes
@search-value	if v-model directive declared then not required but if set allows you to manipulate locally from set selected value field
@search-key	if v-model directive declared then not required but if set allows you to manipulate locally from set selected key field
@return-promise	Not required but if set won't manipulate parent object instead return the full object from remote selection back to you, this contains the entire object selected. It may have many other values you need to update page with.
@method-used	returns a string of mouse or keyboard if they selected auto complete with mouse or keyboard if they used tab up down arrows and enter

Usage

Working Demo project (needs to be downloaded run)

YouTube demo video

Example 1: Basic

Example 2: vue-autocompletion-valid: Validation using vee-validate

Example 3: Remote object sometimes has additional data which should be selected

Example 4: Remote object sends 2 values one to search or show in search box and one to actually select

Example 5: Return promise and deal with selected item manually

Example 6: v-model directive not defined @search-value @search-key used instead

Example 7: Multiple dynamic select box with add remove function : Demo of method-used

Example 8: additionalProperties and auto complete one to auto complete another

Changelog

Credits

Filipa Lacerda

This code originated from above posting, I tried to find the github source for this project but ended up finding it reused everywhere. I had a look at some of the existing auto complete plugins and at the time building from scratch felt most suited to dynamics of it's requirements. Original version by Filipa did most but I needed additional logic to make it work even more dynamically extensively. One of the main issues I found when testing existing auto completes was when an invalid entry is entered the entry persists on input area and there are 2 specific setTimeouts within the js file to try capture real outcome after a race condition.