Customizable Vue component for tag input, which support autocomplete

Overview

Vue Tag Input

Travis npm Style Guide

Customizable Vue component for tag input, which support autocomplete.

Getting Started

Install

Recommand intall from CLI:

npm install --save vue-tag-autocomplete // OR
yarn add vue-tag-autocomplete

If you want to include script directly:

">
 
<script src="https://cdn.jsdelivr.net/npm/vue-tag-autocomplete/dist/umd/vue-tag-input.js">script>

 
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vue-tag-autocomplete/dist/umd/vue-tag-input.css">

Quick Example

">
<template>
  <VueTagInput v-model="tags" :quick-mode="true">VueTagInput>
template>

<script>
import VueTagInput from 'vue-tag-input'

export default {
  data() {
    return {
      tags: [
        'Africa',
        'Taiwan'
      ]
    }
  },
  components: {
    VueTagInput
  }
}
script>

Usage


Props

tags - {Array } (required)

An array of tag objects. Each tag need an id and a text property which is used to display. Otherwise, you could just use array of strings directly. This component would generate id by index and string automatically.

// Recommended: Pass Object 
[
  {id: 1, text: 'Apple'},
  {id: 2, text: 'Banana'},
  ...
]
// Quick: Pass String 
[
  'Apple',
  'Banana',
  ...
]
//

suggestions - {Array }

Default: []
An array of suggestions that are used as basis for showing autocomplete. Each tag need an id and a text property which is used to display. Otherwise, you could just use array of strings directly. This component would generate id by index and string automatically.

// Recommended: Pass Object 
[
  {id: 1, text: 'Apple'},
  {id: 2, text: 'Banana'},
  ...
]
// Quick: Pass String 
[
  'Apple',
  'Banana',
  ...
]
//

quickMode - {Boolean}

Default: false
Allow developers to use v-model, rather than handling add and delete event by yourselves. In quick mode, new tag will append to array as string. If you want to control how new tag be added, you could listen change event. Otherwise, you should listen add and delete event instead.

">
<VueTagInput
  :quick-mode="true"
  v-model="tags"
/>

<VueTagInput
  :quick-mode="true"
  :tags="tags"
  @change="val = { tags = val }"
/>

id - {String}

Defaults to ''
id attribute on . Recommanded to assign id for identity and associate with label.

">
<label for="email">label>
<VueTagInput :id="email" />

placeholder - {String}

Defaults to 'Add new tags'
The placeholder shown for the input.

delimiters - {Array}

Default: [9, 13] (Tab and return keys)
Array of integers matching keyboard event keyCode values. When a corresponding key is pressed, the preceding string is finalised as tag.

delimiterChars - {Array}

Default: [',']
Array of characters matching keyboard event key values. This is useful when needing to support a specific character irrespective of the keyboard layout. Note, that this list is separate from the one specified by the delimiters option, so you'll need to set the value there to [], if you wish to disable those keys.

onlyFromSuggestions - {Boolean}

Default: false
If set to true, it will be possible to add new items only from the autocomplete dropdown.

allowDuplicates - {Boolean}

Default: false
Allows users to add duplicated tags. If it's false, the duplicated tag would play animation with errorAninmatedClass to hint the user.

addOnBlur - {Boolean}

Default: false
Add tag automatically when input field blur.

maxInputLength - {Number}

Default: Infinity
Maximum input length.

maxSuggestionsLength - {Number}

Default: Infinity
Maximum number of suggestions to display.

errorAninmatedClass - {String}

Default: error The animation class would add on duplicated tag element when allowDuplicates is false. The default animation is shaking for 0.25s.

tagStyle - {Object|Function}

Default: {} The style object would be applied on the tag. Besides passing plain object, you can pass a function which return style object to assign conditional style. The function would recieve each element in tags as params. See the example below:

">

<template>
  <VueTagInput
    :tags="tags"
    :tagStyle="tagComputedStyle"
  />
template>

<script>
export default {
  data() {
    return {
      tags: [{
        id: 1,
        text: 'javascript',
        highlight: true
      }, {
        id: 2,
        text: 'css',
        highlight: false
      }, {
        id: 3,
        text: 'html',
        highlight: true
      }]
    }
  },
  methods: {
    tagComputedStyle(item) {
      // If item has highlight is true, the background would be aquamarine color. Otherwise it's grey.
      return item.highlight ? { backgroundColor: 'Aquamarine' } : { backgroundColor: 'grey' }
    }
  }
}
script>

preventDefaultOnEnter - {Boolean}

Default: false
Prevent default when user tap ENTER to avoid the form submission.

Events

add

Params: tag would be added - {String}
Emitted when a tag had be added.

">
<template>
  <VueTagInput :tags="tags" @add="onAdd">VueTagInput>
template>

<script>
export default {
  data() {
    return { tags: [] }
  },
  methods: {
    onAddition(tag) {
      this.tags.push(tag)
    }
  }
}
script>

delete

Params: index of tag would be removed - {Number}
Emitted when a tag had be added.

">
<template>
  <VueTagInput :tags="tags" @delete="onDelete">VueTagInput>
template>

<script>
export default {
  data() {
    return { tags: [] }
  },
  methods: {
    onDelete(index) {
      this.tags.splice(index, 1)
    }
  }
}
script>  

change

Params: the array of updated tags - {Array}
Emitted when a tag had be added or deteled, which only be available in quickMode. The new tag will be appended as string into array. If you need to control new tag in the array, you could modify the last item of array and pass the whole array to data in the listener.

export default {
  data() {
    return { tags: [] }
  },
  methods: {
    onInput(newTags) {
      // newTags will contained the new array of updated tags. 
      const id = newTags.length - 1
      const text = newTags.pop()
      this.tags = [...newTags, {
        id,
        text
      }]
    }
  }
}

inputChange

Parmas: the current input data - {String}
Emitted when input field is changed. You could query autocomplete data here.

export default {
  data() {
    return { 
      tags: [],
      suggestions: []
    }
  },
  methods: {
    onInputChange(query) {
      fetch(`https://your.data.source?query=${query}`, (data) => {
        this.suggestions = data
      })
    }
  }
}

focus

Emitted when input is focused

blur

Emitted when input is Blur

Style

class names

Development

# Run development enviroment
npm start 

# Bundle test file and test it with Jest
npm run test

# Bundle test file and update test snapshot 
npm run test:update

# Examine code style with eslint
npm run lint

# Fix eslint automatically
npm run lint:fix 

# Bundle component module 
npm run build

Author

Lucien Lee

Contributor

Julien Croain

License

MIT

You might also like...
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

vue autoComplete component

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

Google Autocomplete Vue Componet
Google Autocomplete Vue Componet

Google Autocomplete I am sharing this component because I was overwhelmed by complicated examples to achieve this simple job. So, I will try to be as

🧱 Very Downshift like autocomplete solution for Vue

Vue Combo Blocks 🧱 Provides all the building blocks needed for accessible autocomplete, combobox, or typeahead component. A very Downshift like autoc

A better vim plugin for stylus, including proper and up-to-date syntax highligting, indentation and autocomplete
A better vim plugin for stylus, including proper and up-to-date syntax highligting, indentation and autocomplete

Vim Stylus Vim + Stylus = fast, effective and convenient CSS workflow! Features All HTML5 tags and CSS3 props are covered Correct highlighting for int

A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying.
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

🔍 Vue autosuggest component.
🔍 Vue autosuggest component.

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

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 =

Comments
  • Update VueTagInput.vue

    Update VueTagInput.vue

    Deleting the last tag on backspace is very mistake prone for the user. Often a user will hit backspace a bunch of times to clear the input and may accidentally delete several of their tags. Can we add deleteOnBackspace prop to allow turning off "delete tag if key backspace at the start of input"?

    opened by chuckcharles 2
Owner
Julien CROAIN
Julien CROAIN
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
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

Maheshkumar 39 Mar 26, 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
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
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 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
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

Eduardo Aguad 0 Oct 12, 2017