Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/charliekassel/vuejs-autocomplete
Autocomplete component for Vue js
https://github.com/charliekassel/vuejs-autocomplete
Last synced: 3 months ago
JSON representation
Autocomplete component for Vue js
- Host: GitHub
- URL: https://github.com/charliekassel/vuejs-autocomplete
- Owner: charliekassel
- License: mit
- Created: 2017-06-26T15:02:21.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-03-24T15:11:46.000Z (over 2 years ago)
- Last Synced: 2024-04-14T04:27:49.410Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 199 KB
- Stars: 135
- Watchers: 2
- Forks: 78
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vuejs-auto-complete
[](https://travis-ci.org/charliekassel/vuejs-autocomplete?branch=master)
[](https://www.npmjs.com/package/vuejs-auto-complete)
[](https://coveralls.io/github/charliekassel/vuejs-autocomplete?branch=master)
[](https://www.npmjs.com/package/vuejs-auto-complete)
> A Vue autocomplete component
`npm install vuejs-auto-complete --save`
## Usage
Installation, add autocomplete component into your app
```javascript
import Vue from 'vue'
import Autocomplete from 'vuejs-auto-complete'
new Vue({
//...
components: {
Autocomplete,
},
//...
})
```
Api data source
``` html
```
Object data source
``` html
```
Full featured example
``` html
```
``` javascript
// 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 |