A Vue.js component for multi selectable auto complete.

Overview

multiselect-autocomplete

Build Status npm

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.
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

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

Vue 3 multiselect component with single select, multiselect and tagging options.
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

Universal select/multiselect/tagging component for Vue.js
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

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

A Vue 3 headless file selector component

vue3-file-selector A Vue 3 headless File Selector component. How to use This library includes a few headless components for a drag and drop supported

A vue keyboard MultiSelect component.

vue-keyboard-multiselect A project for building a keyboard-supported MultiSelect component based on Vue.js. Build Setup # install dependencies npm i v

Lightweight and mighty select component like Chosen and Select 2 done the Vue way.
Lightweight and mighty select component like Chosen and Select 2 done the Vue way.

@desislavsd/vue-select Lightweight and mighty select component like Chosen and Select 2 done the Vue way. Demos & Docs License MIT License Copyright (

A simple vue drag selector component

Vue-Drag-Selector 基于Vue.js的框选组件 示例(Demo) View Demo 安装(install) npm i vue-drag-selector 引入(import) // main.js import VueDragSelector from "vue-drag-se

Comments
  • Bump node-sass from 4.13.0 to 7.0.0

    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

    Features

    Dependencies

    Community

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

    Misc

    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

    Misc

    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

    Dependabot compatibility score

    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
Owner
Tuna Yağcı
Tuna Yağcı
Simple multi-select component with items displayed in a table like UI

Vue GridMultiselect Simple multi-select component with items displayed in a table like UI Table of Contents ?? Installation ?? Introduction ?? Basic U

Milos Protic 38 Nov 24, 2022
Select & Multi Select implementations for Vue, focused especially on implementing accessibility best practices

This entire repo is very much in an alpha state, and should currently be used only within internal Politico projects, as props / events / classes remain fluid. However, we are working towards a 1.0.0 release, and want to capture our relevant bugs fixed during that process.

POLITICO 12 Jan 1, 2023
Stylable searchable select component for VueJS. This component is renderless so you are free to customize it how you need to!

Please note that this package is still under active development. We encourage everyone to try it and give feedback. ss-select Searchable stylable sele

Miras Mustimov 27 Dec 27, 2022
Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Chosen, Select2, etc. However it was built using Vue.js only ;)

?? _Fireselect_ Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Ch

Firework 51 Jul 23, 2020
Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.

vue-select Everything you wish the HTML select element could do, wrapped up into a lightweight, zero dependency, extensible Vue component. Vue Selec

Jeff Sagal 4.5k Jan 2, 2023
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

Damian Dulisz 6.3k Dec 30, 2022
✅ Vue 2.x component for selecting image from list

✅ Vue Select Image Vue 2.x component for selecting image from list Demo https://mazipan.github.io/vue-select-image/ Installation # Yarn yarn add vue-s

Irfan Maulana 142 Dec 9, 2022
a lovely component of cascade selector with vue.js

v-cascade A lovely component of cascade selector with vue.js (Support both of PC and Mobile) 中文文档 Introduction Demo Screenshot basic-selector remote-s

Zanyuyu 33 May 8, 2021
Custom select component using Vue.JS

advanced-select What's this Component to render a "select" with advanced interactions (search, select/deselect all, etc) for websites built with Vue a

ENA 15 Nov 24, 2022
A Vue.js search select component

vue-search-select A Vue.js search select component with NO dependencies. CSS borrowed from https://github.com/Semantic-Org Version 2.x Support Vue.js

JungJoo Seo 348 Dec 26, 2022