vue-autocompletion

1.1.10 • Public • Published

Vue Autocompletion

npm (scoped) npm MIT

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.

Readme

Keywords

Package Sidebar

Install

npm i vue-autocompletion

Weekly Downloads

31

Version

1.1.10

License

MIT

Unpacked Size

990 kB

Total Files

22

Last publish

Collaborators

  • vahidh