hellomahe / V Tag Suggestion
A simple tag component with typeahead
Stars: ✭ 40
Projects that are alternatives of or similar to V Tag Suggestion
Vue Input Tag
🔖 Vue.js 2.0 Input Tag Component
Stars: ✭ 507 (+1167.5%)
Mutual labels: tags, vuejs-components, vuejs2
Vue Swatches
🎨 Help the user picking beautiful colors!
Stars: ✭ 456 (+1040%)
Mutual labels: vuejs-components, vuejs2
Vue Gl
Vue.js components rendering 3D WebGL graphics reactively with three.js
Stars: ✭ 434 (+985%)
Mutual labels: tags, vuejs2
Vue Virtual Scroller
⚡️ Blazing fast scrolling for any amount of data
Stars: ✭ 6,326 (+15715%)
Mutual labels: vuejs-components, vuejs2
react-autocomplete-tags
React Autocomplete Tags
Stars: ✭ 17 (-57.5%)
Mutual labels: autocomplete, tags
react-native-element-textinput
A react-native TextInput, TagsInput and AutoComplete component easy to customize for both iOS and Android.
Stars: ✭ 28 (-30%)
Mutual labels: autocomplete, tags
Vuelayers
Web map Vue components with the power of OpenLayers
Stars: ✭ 532 (+1230%)
Mutual labels: vuejs-components, vuejs2
Vue2 Perfect Scrollbar
Vue.js wrapper for perfect scrollbar
Stars: ✭ 225 (+462.5%)
Mutual labels: vuejs-components, vuejs2
Vue Hotel Datepicker
Vue date range picker component
Stars: ✭ 665 (+1562.5%)
Mutual labels: vuejs-components, vuejs2
Vue Wordpress Pwa
An offline-first SPA using Vue.js, the WordPress REST API and Progressive Web Apps
Stars: ✭ 665 (+1562.5%)
Mutual labels: vuejs-components, vuejs2
Vue Tags Input
A tags input component for VueJS
Stars: ✭ 761 (+1802.5%)
Mutual labels: autocomplete, tags
React Selectrix
A beautiful, materialized and flexible React Select control
Stars: ✭ 166 (+315%)
Mutual labels: autocomplete, tags
vue-notification-bell
Vue.js notification bell component.
Stars: ✭ 64 (+60%)
Mutual labels: vuejs2, vuejs-components
Vue Places
Places component is based on places.js for Vue 2.x. Turn any <input> into an address autocomplete.
Stars: ✭ 106 (+165%)
Mutual labels: autocomplete, vuejs2
Contentful Tags Autocomplete Extension
UI Extension for Contenful (CMS) to add an autocompleting tags widget to content types
Stars: ✭ 10 (-75%)
Mutual labels: autocomplete, tags
Vue Atlas
A Vue.js 2 UI component library.
Stars: ✭ 173 (+332.5%)
Mutual labels: vuejs-components, vuejs2
Protovue
A prototyping component library
Stars: ✭ 195 (+387.5%)
Mutual labels: vuejs-components, vuejs2
Vuex I18n
Localization plugin for vue.js 2.0 using vuex as store
Stars: ✭ 657 (+1542.5%)
Mutual labels: vuejs-components, vuejs2
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].