stock-auto-complete
vuejs-auto-complete
A Vue autocomplete component
npm install vuejs-auto-complete --save
Usage
Installation, add autocomplete component into your app
import Vue from 'vue'
import Autocomplete from 'vuejs-auto-complete'
new Vue({
//...
components: {
Autocomplete,
},
//...
})
Api data source
<autocomplete
source="https://api.github.com/search/repositories?q="
results-property="items"
results-display="full_name">
</autocomplete>
Object data source
<autocomplete
:source="[{id:1,name:'abc'},{id:2,name:'def'}]">
</autocomplete>
Full featured example
<autocomplete
ref="autocomplete"
placeholder="Search Distribution Groups"
:source="distributionGroupsEndpoint"
input-class="form-control"
results-property="data"
:results-display="formattedDisplay"
:request-headers="authHeaders"
@selected="addDistributionGroup">
</autocomplete>
// parent component
computed: {
authHeaders () {
return {
'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1Ni....'
}
},
},
methods: {
distributionGroupsEndpoint () {
return process.env.API + '/distribution/search?query='
},
addDistributionGroup (group) {
this.group = group
// access the autocomplete component methods from the parent
this.$refs.autocomplete.clearValues()
},
authHeaders () {
return {
'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1Ni....'
}
},
formattedDisplay (result) {
return result.name + ' [' + result.groupId + ']'
}
}
Available props
Prop | Type | Required | Default | Description |
---|---|---|---|---|
source | String|Func|Object|Array | true | data source for the results | |
placeholder | String | 'Search' | input placeholder | |
initialValue | String|Number | starting value | ||
initialDisplay | String | starting display value | ||
inputClass | String|Object | css class for the input div | ||
disableInput | Boolean | to disable the input | ||
name | String | name attribute for the value input |
||
resultsProperty | String | property api results are keyed under | ||
resultsValue | String | 'id' | property to use for the value |
|
resultsDisplay | String|Function | 'name' | property to use for the display or custom function |
|
requestHeaders | Object | extra headers appended to the request | ||
showNoResults | Boolean | true | To show a message that no results were found | |
clearButtonIcon | String | Optionally provide an icon css class |
Available events
Event | Output | Description |
---|---|---|
results | Object | Results returned from a search |
noResults | Object | When no results are returned |
selected | Object | When an item is selected |
input | String|Number | The value when an item is selected |
clear | When selected results are cleared | |
close | When the options list is closed | |
enter | String | Emits the input value when enter is pressed |
nothingSelected | String | Emits the input value when enter is pressed and nothing was selected |
Available Slots
Slot | Description |
---|---|
firstResult | list item placed before all results |
lastResult | list item placed at the end of the results |
noResults | list item shown when no results are present |
Dependencies
@vue/test-utils: ^1.0.0-beta.12autoprefixer: ^6.7.2babel-core: ^6.22.1babel-eslint: ^7.1.1babel-jest: ^22.4.1babel-loader: ^6.2.10babel-plugin-transform-runtime: ^6.22.0babel-preset-env: ^1.3.2babel-preset-stage-2: ^6.22.0babel-register: ^6.22.0chai: ^3.5.0chalk: ^1.1.3connect-history-api-fallback: ^1.3.0copy-webpack-plugin: ^4.0.1coveralls: ^3.0.0cross-env: ^4.0.0css-loader: ^0.28.0eslint: ^3.19.0eslint-config-standard: ^6.2.1eslint-friendly-formatter: ^2.0.7eslint-loader: ^1.7.1eslint-plugin-html: ^2.0.0eslint-plugin-promise: ^3.4.0eslint-plugin-standard: ^2.0.1eslint-plugin-vue: ^4.3.0eventsource-polyfill: ^0.9.6express: ^4.14.1extract-text-webpack-plugin: ^2.0.0file-loader: ^0.11.1friendly-errors-webpack-plugin: ^1.1.3html-webpack-plugin: ^2.28.0http-proxy-middleware: ^0.17.3inject-loader: ^3.0.0jest: ^22.4.2jest-fetch-mock: ^1.4.2jest-serializer-vue: ^0.3.0lodash: ^4.17.5lolex: ^1.5.2opn: ^4.0.2optimize-css-assets-webpack-plugin: ^1.3.0ora: ^1.2.0phantomjs-prebuilt: ^2.1.14rimraf: ^2.6.0semver: ^5.3.0shelljs: ^0.7.6sinon: ^2.1.0sinon-chai: ^2.8.0stylus: ^0.54.5stylus-loader: ^3.0.1url-loader: ^0.5.8vue: ^2.5.13vue-jest: ^2.1.0vue-loader: ^12.1.0vue-server-renderer: ^2.5.13vue-style-loader: ^3.0.1vue-template-compiler: ^2.3.3webpack: ^2.6.1webpack-bundle-analyzer: ^2.2.1webpack-dev-middleware: ^1.10.0webpack-hot-middleware: ^2.18.0webpack-merge: ^4.1.0