https://github.com/tunayagci/multiselect-autocomplete
A Vue.js component for multi selectable auto complete.
https://github.com/tunayagci/multiselect-autocomplete
auto-complete autocomplete multi-select multiple multiple-autocomplete multiselect multiselect-autocomplete vue
Last synced: 4 months ago
JSON representation
A Vue.js component for multi selectable auto complete.
- Host: GitHub
- URL: https://github.com/tunayagci/multiselect-autocomplete
- Owner: TunaYagci
- License: mit
- Created: 2018-07-22T07:24:21.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-26T16:08:53.000Z (about 2 years ago)
- Last Synced: 2025-03-17T11:12:18.335Z (4 months ago)
- Topics: auto-complete, autocomplete, multi-select, multiple, multiple-autocomplete, multiselect, multiselect-autocomplete, vue
- Language: Vue
- Homepage:
- Size: 2.46 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# multiselect-autocomplete
[](https://semaphoreci.com/tunayagci/multiselect-autocomplete)
## Install:
* `npm i multiselect-autocomplete`
* Add `fontawesome` to your index.html for **loading icon**, like:
```html
import MultiSelectAutoComplete from "./MultiSelectAutoComplete.vue";
import Vue from 'vue';
import backend from "./backend";
import debounce from 'debounce';
export default {
components: {
MultiSelectAutoComplete,
},
name: 'star-wars-auto-complete',
data() {
return {
suggestions: [],
selectedEntities: [],
isLoading: false
}
},
props: {
value: {
type: String,
required: false
}
},
computed: {
getInstance() {
return this;
}
},
created() {
const c3po = 'C-3PO';
const r2d2 = 'R2-D2';
this.selectedEntities.push({id: c3po, visibleName: c3po});
this.selectedEntities.push({id: r2d2, visibleName: r2d2});
},
methods: {
onSelected(selection) {
if (!this.selectedEntities.find(f => f.id === selection.id)) {
this.selectedEntities.push(selection);
}
},
searchParamChanged: debounce((searchString, self) => {
self.inputValue = searchString;
if (searchString) {
self.isLoading = true;
return backend.searchCharacters(searchString).then((characters) => {
let suggestions = [];
if (characters && characters.count > 0) {
suggestions = characters.results.map(result => {
return {
id: result.name,
visibleName: result.name
}
});
}
self.suggestions = suggestions;
}).finally(() => self.isLoading = false);
} else {
return self.suggestions = [];
}
}, 400),
onSelectedEntityDelete(index) {
Vue.delete(this.selectedEntities, index);
}
}
}
```