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: 11 days 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 (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-04-26T16:08:53.000Z (over 1 year ago)
• Last Synced: 2024-12-03T03:12:29.064Z (19 days 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

[![Build Status](https://semaphoreci.com/api/v1/tunayagci/multiselect-autocomplete/branches/master/shields_badge.svg)](https://semaphoreci.com/tunayagci/multiselect-autocomplete)

![npm](https://img.shields.io/npm/v/multiselect-autocomplete)

![](/public/autocomplete-3.gif)

## 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);

            }

        }

    }

```