https://github.com/hellomahe/v-tag-suggestion
A simple tag component with typeahead
https://github.com/hellomahe/v-tag-suggestion
autocomplete tags vue vuejs-components vuejs2
Last synced: about 1 year ago
JSON representation
A simple tag component with typeahead
- Host: GitHub
- URL: https://github.com/hellomahe/v-tag-suggestion
- Owner: hellomahe
- Created: 2018-03-10T13:52:01.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-22T18:32:12.000Z (about 8 years ago)
- Last Synced: 2024-04-24T09:24:47.442Z (about 2 years ago)
- Topics: autocomplete, tags, vue, vuejs-components, vuejs2
- Language: Vue
- Homepage:
- Size: 9.29 MB
- Stars: 39
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# v-tag-suggestion
A simple tag component with typeahead ⌨️
Install via npm
``` bash
npm install vue-tag-suggestion
```
##### Import and register where you want to use
``` bash
import vue-tag-suggestion from 'vue-tag-suggestion'
components: {
vue-tag-suggestion
}
```
##### Props
tags(Array of objects) - Selected tags
suggestions(Array of objects) - Suggestions
```bash
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
``` bash
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
}
};
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
```
#TODO
-~~Dynamic length for auto-suggestions as a prop~~
- Separators as a prop