A simple tag component with typeahead

Overview

v-tag-suggestion

A simple tag component with typeahead ⌨️

Install via npm

npm install vue-tag-suggestion
Import and register where you want to use
import vue-tag-suggestion from 'vue-tag-suggestion'

components: {
      vue-tag-suggestion
    }
Props

tags(Array of objects) - Selected tags

suggestions(Array of objects) - Suggestions

  props:{
    tags:{
      type:Array,
      required:true
    },
    suggestions:{
      type:Array,
      required:false,
      default:() => {
        return[]
      }
    },
    suggestionLength:{
      type:Number,
      required:false,
      default:10
    }
  }

Note: Every object has to have a name property.

Example

<template>
  <div>
<tag
 :tags="tags" :suggestions="suggestion" :suggestionLength="6"/>
  </div>
</template>

<script>
import tag from "../v-tag-suggestion.js"

export default {
  name: "TagInput",
  data() {
    return {
      tags: [
        {
          name: "hello"
        }
      ],
      suggestions: [
        {
          name: "This"
        },
        {
          name: "is"
        },
        {
          name: "a"
        },
        {
          name: "new"
        },
        {
          name: "vue"
        },
        {
          name: "tag"
        },
        {
          name: "component"
        },
        {
          name: "which"
        },
        {
          name: "will"
        },
        {
          name: "give"
        },
        {
          name: "auto"
        },
        {
          name: "suggestion"
        }
      ],
      msg: "Welcome to Your Vue.js App"
    };
  },
  components: {
    tag
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

#TODO -Dynamic length for auto-suggestions as a prop

  • Separators as a prop
You might also like...
A configurable & lightweight Vue wrapper component that enables
A configurable & lightweight Vue wrapper component that enables

A configurable & lightweight Vue wrapper component that enables "out of the box" email autocomplete/suggestions on input elements.

Mention component for Vue.js
Mention component for Vue.js

vue-mention Mention popper for input and textarea Documentation Sponsors Quick start script import { Mentionable } from 'vue-mention' const users =

Vue 2 Component to make Autocomplete element.
Vue 2 Component to make Autocomplete element.

Vue 2 Autocomplete Autocomplete component for Vue 2. This is a fork of vue2-autocomplete - Naufal Rabbani [email protected] Install You can imp

A Vue Autocomplete component with accessibility and simplicity in mind.

VueCompleter A Vue Autocomplete component with accessibility and simplicity in mind. Installation npm install vue-completer or yarn add vue-completer

 🔍 Autosuggest component built for Vue
🔍 Autosuggest component built for Vue

vue-autosuggest 🔍 Autosuggest component built for Vue. Table of Contents Examples Features Installation Usage Props Inspiration Contributors LICENSE

vue autoComplete component

vueto-complete vue autoComplete component Index Features Installation Examples Props Slots Events Styling LICENSE Features Supports full control over

Autocomplete - Accessible autocomplete component for vanilla JavaScript and Vue
Autocomplete - Accessible autocomplete component for vanilla JavaScript and Vue

Autocomplete Accessible autocomplete component for vanilla JavaScript and Vue. Demo Take a look at the documentation page, and the Codepen examples. F

A simple tag component with typeahead
A simple tag component with typeahead

v-tag-suggestion A simple tag component with typeahead ⌨️ Install via npm npm install vue-tag-suggestion Import and register where you want to use imp

A simple tags input with typeahead (autocomplete) built with Vue.js 2.
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Voerro Vue Tags Input v2 A simple tags input with typeahead built with Vue.js 2. Live Demo Installation via NPM npm i @voerro/vue-tagsinput --save-dev

A simple tags input with typeahead (autocomplete) built with Vue.js 2.
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Vue Tags Input v4 Forked from voerro/vue-tagsinput A simple tags input with typeahead built with Vue.js 2. Installation via NPM npm i @seriouslag/vue-

A simple tags input with typeahead (autocomplete) built with Vue.js 2.
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Voerro Vue Tags Input v2 A simple tags input with typeahead built with Vue.js 2. Live Demo Installation via NPM npm i @voerro/vue-tagsinput --save-dev

An autocomplete/typeahead component for Vue 2 and Bootstrap 4
An autocomplete/typeahead component for Vue 2 and Bootstrap 4

vue-bootstrap-typeahead A simple list-group based typeahead/autocomplete using Bootstrap 4 and Vue 2 View The Examples Installation From NPM: npm i

:mag: Typeahead component for Vue.js

VueTypeahead See a live demo here. Install NPM Available through npm as vue-typeahead. npm install --save vue-typeahead Also, you need to install a H

A simple tag selector as a vue component.
A simple tag selector as a vue component.

Vue-tag-selector is a component for vuejs for tag type fields. Light (6.3kb gzipped) and customizable. Offering regex validation. Check out the demo I

Manager the meta information of the head tag, a simple and easy way

vue-head Manipulating the meta information of the head tag, a simple and easy way Motivated by HEAD For syntax of the previous version click here Usag

Simple implementation of Google Tag Manager in Vue.js 2.0
Simple implementation of Google Tag Manager in Vue.js 2.0

Vue Google Tag Manager *** Maintainers & Contributors welcome *** Simple implementation of Google Tag Manager in Vue.js This plugin will help you in y

Simple vue tag editor
Simple vue tag editor

Simple Vue Tag Editor ======================= Originally inspired a lot by https://github.com/hnakamur/vue.tag-editor.js The code written here is upon

:bookmark: Vue.js 2.0 Input Tag Component
:bookmark: Vue.js 2.0 Input Tag Component

vue-input-tag A Vue.js 2.0 input tag component inspired in react-tagsinput Installation NPM / Yarn npm install vue-input-tag --save yarn add vue-input

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

Owner
Maheshkumar
Seeking something worth to add in my bio :)
Maheshkumar
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Vue Tags Input v4 Forked from voerro/vue-tagsinput A simple tags input with typeahead built with Vue.js 2. Installation via NPM npm i @seriouslag/vue-

Landon Gavin 1 Nov 6, 2021
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Voerro Vue Tags Input v2 A simple tags input with typeahead built with Vue.js 2. Live Demo Installation via NPM npm i @voerro/vue-tagsinput --save-dev

null 0 Jul 8, 2021
An autocomplete/typeahead component for Vue 2 and Bootstrap 4

vue-bootstrap-typeahead A simple list-group based typeahead/autocomplete using Bootstrap 4 and Vue 2 View The Examples Installation From NPM: > npm i

Alex Urquhart 209 Nov 19, 2022
A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying.

v-autosuggest A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying. Table of contents Installation Usage Pr

soraino 9 Nov 24, 2022
Autocomplete component for Vue.js

v-autocomplete Autocomplete component for Vue.js This component is css-free. The idea is to be used with any framework. Installation Using yarn yarn a

Marcos 347 Jan 3, 2023
Autocomplete component for Vue js

vuejs-auto-complete A Vue autocomplete component npm install vuejs-auto-complete --save Usage Installation, add autocomplete component into your app i

Charlie Kassel 136 Nov 8, 2022
🔍 Vue autosuggest component.

vue-autosuggest ?? Autosuggest component built for Vue. Table of Contents Examples Features Installation Usage Props Inspiration Contributors LICENSE

Darren Jennings 599 Dec 31, 2022
Feature-rich autocomplete component for Vue.js

vue-simple-suggest Simple yet feature-rich autocomplete component for Vue.js Install npm install --save vue-simple-suggest See installation guide for

Marketplace Technologies 442 Jan 4, 2023
A Vue component for autocomplete email domains

vue-email-dropdown A Vue component for autocomplete email domains Features Allows passing a list of domains to be used in for the suggestions. Allows

Danny Feliz 27 Nov 24, 2022
Autocomplete Component for Vue.Js

vue-autocomplete Autocomplete Component for Vue.Js Intro Vue Autocomplete is a Vue.Js component to make some suggestions for user input. come with .vu

Naufal Rabbani 210 Jan 18, 2022