multiselect-autocomplete

Install:

npm i multiselect-autocomplete
Add fontawesome to your index.html for loading icon, like:

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"

Docs:

https://tunayagci.github.io/multiselect-autocomplete/#/docs

Example:

https://tunayagci.github.io/multiselect-autocomplete


<template>
    <multi-select-auto-complete
            :suggestions="suggestions"
            @onSearchParamChanged="searchParamChanged($event, getInstance)"
            @onSelected="onSelected"
            @onSelectedSelectionDelete="onSelectedEntityDelete"
            :selectionArray="selectedEntities"
            :is-loading="isLoading">
    multi-select-auto-complete>
template>

<script>
    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);
            }
        }
    }
script>

You might also like...

A component for Vue.js to select double-sided data.

Vue Select Sides A component for Vue.js to select double-sided data. The customer can select one or more items and ship them from side to side. Values

72 Dec 17, 2022

Vanilla Vue.js component that mimics Selectize behavior (no jquery dependency)

vue-selectize A Vanilla Vue.js component that mimics the selectize.js behavior https://vue-selectize.vilanculo.me Installation yarn add selectize @isn

77 Nov 19, 2022

Vue 3 multiselect component with single select, multiselect and tagging options.

Vue 3 Multiselect Sponsors Other libraries @vueform/slider - Vue 3 slider component with multihandles, tooltips merging and formatting. @vueform/toggl

556 Dec 27, 2022

Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

6.3k Dec 30, 2022

A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html tag which isn't supported in most of the browsers)

Searchable-Select-Dropdown A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html t

13 Sep 15, 2022

Comments

Bump node-sass from 4.13.0 to 7.0.0
Bumps node-sass from 4.13.0 to 7.0.0.

Release notes

Sourced from node-sass's releases.

v7.0.0

Breaking changes

Drop support for Node 15 (@nschonni)

Set rejectUnauthorized to true by default (@scott-ut, #3149)

Features

Add support for Node 17 (@nschonni)

Dependencies

Bump eslint from 7.32.0 to 8.0.0 (@nschonni, #3191)

Bump fs-extra from 0.30.0 to 10.0.0 (@nschonni, #3102)

Bump npmlog from 4.1.2 to 5.0.0 (@nschonni, #3156)

Bump chalk from 1.1.3 to 4.1.2 (@nschonni, #3161)

Community

Remove double word "support" from documentation (@pzrq, #3159)

Misc

Bump various GitHub Actions dependencies (@nschonni)

Supported Environments

OS Architecture Node

Windows x86 & x64 12, 14, 16, 17

OSX x64 12, 14, 16, 17

Linux* x64 12, 14, 16, 17

Alpine Linux x64 12, 14, 16, 17

FreeBSD i386 amd64 12, 14

*Linux support refers to major distributions like Ubuntu, and Debian

v6.0.1

Dependencies

Remove mkdirp (@jimmywarting, #3108)

Bump meow to 9.0.0 (@ykolbin, #3125)

Bump mocha to 9.0.1 (@xzyfer, #3134)

Misc

Use default Apline version from docker-node (@nschonni, #3121)

Supported Environments

... (truncated)

Changelog

Sourced from node-sass's changelog.

v4.14.0

https://github.com/sass/node-sass/releases/tag/v4.14.0

v4.13.1

https://github.com/sass/node-sass/releases/tag/v4.13.1

Commits

918dcb3 Lint fix

0a21792 Set rejectUnauthorized to true by default (#3149)

e80d4af chore: Drop EOL Node 15 (#3122)

d753397 feat: Add Node 17 support (#3195)

dcf2e75 build(deps-dev): bump eslint from 7.32.0 to 8.0.0

bfa1a3c build(deps): bump actions/setup-node from 2.4.0 to 2.4.1

80d6c00 chore: Windows x86 on GitHub Actions (#3041)

566dc27 build(deps-dev): bump fs-extra from 0.30.0 to 10.0.0 (#3102)

7bb5157 build(deps): bump npmlog from 4.1.2 to 5.0.0 (#3156)

2efb38f build(deps): bump chalk from 1.1.3 to 4.1.2 (#3161)

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0