vuejs-auto-complete
A Vue autocomplete component Forked from https://github.com/charliekassel/vuejs-autocomplete Added fetch abort when theres another request, remove click searching, disabled focus clearing
npm install vuejs-auto-complete-with-abort --save
Usage
Installation, add autocomplete component into your app
import Vue from 'vue'
import Autocomplete from 'vuejs-auto-complete-with-abort'
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 + ']'
}
}
Available props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| source | String|Function|Object|Array | true | data source for the results | |
| method | String | 'get' | http method for api requests | |
| 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 |
||
| resultsFormatter | Function |
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' | 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 | ||
| maxlength | Number | Optional max input length |
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 |
136 Nov 8, 2022
442 Jan 4, 2023
209 Nov 19, 2022
27 Nov 24, 2022
210 Jan 18, 2022
0 Oct 12, 2017
3 Nov 8, 2020
16 Jan 10, 2022
275 Aug 29, 2022
17 Jul 7, 2022
1 Nov 6, 2021
0 Jul 8, 2021
48 Dec 28, 2022
599 Dec 31, 2022
28 Jul 19, 2022
462 Dec 22, 2022
0 Dec 12, 2019
9 Nov 24, 2022
39 Mar 26, 2022