A Vue autocomplete component
npm install vuejs-auto-complete --save
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 (input) {
return process.env.API + '/distribution/search?query=' + input
},
addDistributionGroup (group) {
this.group = group
// access the autocomplete component methods from the parent
this.$refs.autocomplete.clear()
},
authHeaders () {
return {
'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1Ni....'
}
},
formattedDisplay (result) {
return result.name + ' [' + result.groupId + ']'
}
}
Prop | Type | Required | Default | Description |
---|---|---|---|---|
source | String | Function | Object | Array |
method | String | ‘get’ | http method for api requests | |
placeholder | String | ‘Search’ | input placeholder | |
initialValue | String | Number | ||
initialDisplay | String | starting display value | ||
inputClass | String | Object | ||
disableInput | Boolean | to disable the input | ||
name | String | name attribute for the value input |
||
resultsFormatter | Function<Object[]> | Function to format the server data. Should return an array of objects with id and name properties | ||
resultsProperty | String | property api results are keyed under | ||
resultsValue | String | ‘id’ | property to use for the value |
|
resultsDisplay | String | Function | ‘name’ | |
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 | ||
maxlength | Number | Optional max input length |
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 |
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 |
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 |
Author: charliekassel
Source Code: https://github.com/charliekassel/vuejs-autocomplete
#vuejs #vue #javascript #vue-js