johmun / vue-tags-input Goto Github PK

I use an autocomplete to show suggestions. Each suggestion (item) has a label (text) and a category. I'd like to prevent duplicates, but the problem is that in my case, the text values of two different tags can be the same, although they really are different tags (different categories). E.g. I have two tags, both have the text 'Beatle', but one has a category 'Animal' and the other has a category 'Car'.

The user should be able to select both tags, but each tag only once. This cannot be done by setting the properties autocomplete-filter-duplicates and avoid-adding-duplicates to true, because the duplicate detection is done by comparing text values (which are the same).

Proposed solutions:

• either provide a way to pass a duplicate detection function. This way, when detecting duplicates, it is possible to compare the text and the category of the tags, instead of just the text.

• as an alternative, provide a new event 'before-autocomplete-suggestion' so I can filter out invalid (duplicate) suggestions myself. Although this is a useful event, this solution has the downside that the problem still exist if no autocomplete is used, or if add-only-from-autocomplete is false.

Hey JohMun,

first of all thanks for a great component! 😃

I was wondering why the comma and/or semicolon wouldn't work as "addOnKey"s.

v-bind:addOnKey="[9, 13, 32, 44, 59]"

(the enter, space and tab work just fine)

We're using the component for multiple email input and it might be quite natural for some people to separate them by a comma/semicolon.

We do have the separators defined too:

v-bind:separators="[',', ';']"

so multiple entries get processed just fine eventually but it would be nice if they were validated as-you-go when a comma/semicolon is pressed.

Cheers,
Jacob

Hi,

Quick question: could the tag object have label and value properties? In my case, I need to display a name/email combo, but I need to get an id as the value.

Hi! Are there any workable implementations of vue-tags-input in NUXT? I installed plugin but it doesn't work properly. However Nuxt accepts the component.

Hello, and thanks for such a great component!

I'm experiencing an issue where everything is working fine if the tags: [] definition is in the root level of my data() method, but if I place it inside my form object, the tags property is not behaving reactively. Therefore, when I update tags in the input, my form variable is not getting updated and thus the data is not submitted with the form

The tag variable works fine and behaves reactively when it is nested inside my form object, but not the tags array.

Is this an issue that you can recreate? Please let me know if sharing some code will help.

Thanks again!

Hello everybody :-)

Is it possible to limit the number of tags somehow? I'd like to allow 5 tags :-)

Thanks in advance :-)

Hey, really great tool.

One question: is it possible to mix tags and text in the same input field? Can't find anything in the docs.

Looks like you're documenting and internally using the word "backslash", however I think you might mean "backspace".

Backslash is this character: \
Backspace is not printable, but it's the character on top of the enter/return key

more info on backspace: https://en.wikipedia.org/wiki/Backspace

I might look how much of backslash is public API too to change it without breaking change (or release as a new major)

Just wanna say thanking for building this.
it save me a lot of time.
Compare with 3 other Vue tag input option.
This one is easier to customize and have better doc

:)
Thanks!

I have a list of 500+ items in autocomplete list. I wanted to modify autocomplete div to a smaller size in height..How can i do that?

Thank You For Such Component 💯 ,

In My Situation I Need The Input OF The Tags To Be Type Of textareaInstead Of text
How I Can Change It?

Hi everyone!

I need to link the click event on the tag and create/open a div panel that allow user to edit more information related to the tag selected.

how can I do that?

my best regards.

Can't find any options to ignore default generated CSS, anyway to achieve that?

First of all, great component!

Is it possible to do a callback on creation/deletion with a custom value? I have a v-for loop that reuses this component multiple times. I'd like to pass the index of the item in my v-for to a custom function on creation/deletion of a tag.

Thank you,

I would like to open auto-complete dropdown when the tag input is in focus. Is it possible as of now?

In a project I am working on, we are using

:add-on-key="addOnKeys"

to allow creating tags with enter, comma, and semicolon:

computed: {
    	 addOnKeys: function() {
    		var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
    		 
    		return [13, (!isFirefox) ? 186 : 59, 188];
    	 }, 

During testing, we noticed that on Android devices, tags will not be created when a user touches those keys.

After research, event keyCodes have been a long standing issue with Android. When the user touches most keys, the keyCode is 229. (Delete and enter return the correct keyCodes.)

We came up with a solution, but we are trying to avoid using a custom version of the plugin.

We changed the keydown event to keyup:

            @keyup="performAddTags(
              filteredAutocompleteItems[selectedItem] || newTag, $event
            )"

Then we modified noTriggerKey to see if the keyCode is 229. If it is, we look at the last character of the input field. If it was a comma or a semicolon, we change the keyCode accordingly:

    noTriggerKey: function noTriggerKey(event, category) {
      var keyCode = event.keyCode;
      if (keyCode == 229) {
        var charAt = event.target.value.charAt(event.target.value.length - 1).charAt();
        if (charAt == ',') {
          keyCode = 188;
        } else if (charAt == ';') {
          keyCode = 186;
        }
      }
      var triggerKey = this[category].indexOf(keyCode) !== -1;
      if (triggerKey) event.preventDefault();
      return !triggerKey;
    },

Although this works, it is far from an elegant solution.

Hello JohMun.
Thanks for a nice component.

I'm interested using this component with vuelidate.
What would be the best way to join this two components together?
I know that vue-tags-input have own validation but I use some different fields in form.
I have problem when I try to using those together.

Thanks

Hi, I'm using this component and it is great, thanks!

I want to add arrow key event to the tags input, in order to focus on previous and next tag like picture below:

I tried some ways but neither worked. Could u pls tell me how to modify the source code to achieve it?

My editor expand to the bottom of the page

Auto complete is overflow

Question: how do I set auto complete box at top?

Thank you very much!

Hi,

Does this support SSR for usage in frameworks this Nuxt.js.

Thanks,

First of all, Great compenent. Thank you so much.

I wondered. Why I get this error? I did not use validator, I wanna send
[ {text: 'Bla bla' }, {text: 'Bla bla2' }, {text: 'Bla bla3' } ] this array. But I get this error. I did not write any validation on these elements..

Hi,

how to add focus/blur event on input field from parent component? I need to emit event when user focus on input or blur.

Best all!

Thx
D

When using the following vue-tags-input:

<vue-tags-input
   class="tags-input"
   v-model="tag"
   :tags="tags"
   :allow-edit-tags="true"
   :add-from-paste="false"
   :avoid-adding-duplicates="false"
   :delete-on-backslash="true"
   :max-tags="5"
   :separators="[',']"
   :placeholder="Enter up to 5 tags, separated by commas."
   @tags-changed="function(newTags) { return tags = newTags; }"
   @before-adding-tag="function(obj) { obj.tag.text = obj.tag.text.trim(); if (obj.tag.text.length > 0) { obj.addTag(); }}"/>

If I type:

1enter
2enter
3enter
4enter

Followed by:

5,6,7,8,9,10enter

I will get 10 tags:

From that point on, I can add as many tags as I want.

I can also just enter 1,2,3,4,5,6,7,8,9,10 and get the same effect.

I'm looking for a tag component that I can use to enter multiple email addresses similar to the way they work in Apple Mail (and presumably many other email clients).

These act just like tags with autocomplete, except that instead of hitting enter to "confirm" an email address you just type a comma and the email becomes a "tag."

Is that possible via your component? I didn't see any way to configure it but if it would be an easy tweak I thought I'd ask. Thanks for the cool component!

I really sure about my code.

                    <vue-tags-input
                    :id="'vtg' + index"
                    style="max-width: none; width: 100%;"
                    v-model="form.parent_id[index]"
                    :tags="Ayet.Tags"
                    placeholder="Konu Ekle"
                    :autocomplete-items="filteredItems(index)"
                    :avoid-adding-duplicates="true"
                    @before-adding-tag="handler => addingTag(handler, Ayet) "
                    @before-deleting-tag="handler => deletingTag(handler, Ayet)"
                    @tags-changed="newTags => Ayet.Tags = newTags"  

despite I use avoid-adding-duplicates. handler.addTag(); is invoked twice. I can not understand why it works like that

addingTag(handler: any, Ayet: Object) {
      handler.addTag();
},

here it is. When ı add asdasd, it is added twice. Where is the problem?

When editing a tag, is it possible to replace the undo action with the delete action?

Is it possible to have an option to show dropdown on text input focus?
So it doesn't always show like 'autocomplete-always-open' option, but shows when user focus on text input but he didn't start typing yet

do i can avoid create tag just select in autocomplete ?

First of all thanks for creating this. It is working really well!

HOWEVER...

I can't figure out how to set width of the component. I tried absolutely everything and no matter what it maxes out to 450px and goes to another line when adding tags. Where is no setting on this or documentation on this. I managed to make it px specific at some point (can't remember how) but it wasn't responsive and was broken anyway.
This is how width is stuck when I use component:

http://prntscr.com/jmgmpc

Is it possible to display a tag that is disabled in the autocomplete?

Great module!

However there's an issue with it throwing an error:

[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, got Null

It works perfectly, but I don't want to keep seeing this error on the console.

the value prop doesn't seem to be documented either, and it's set as a required string in the module's codebase. but the docs just suggest using v-model

Any ideas?

Thanks for your sharing great work. @JohMun

I just wanted to know if is there anyway we can hide the placeholder letters after we fill out max tags.
Can you let me know please if this functionality has already been implemented or we need to make a PR for it?

Thanks in advance.

How to use "vue-tag input" without using NPM or using html tags

It could be nice feature to move between tags with arrow keys and insert new tags between existing tags. This feature allows using tag editor as logical expression editor. It could be achieved moving editor component representation in tags list assuming that only one focus is needed at time :) JohMun! Could i open branch for such feature?

How to load default tags when I init input?

I have an array of strings ["primary", "overdue", "todo"] on a property that I'm binding to the :tags prop.

What is the best method for loading this without having to go through an extra step on my side to bind?

Caught this by chance. Seems to be the case whenever we filter using RexExp and passing it the tag string.

Should we be manually stripping the '', or is there a better way?

Helloo! This is an awesome component. Thank you for creating and sharing it. The documentation is also on point.

I'm not sure if this being worked on, but it would be cool to be add an option to drag and drop tags around, and set their priority. So instead of 1. Apples, 2. Oranges, 3. Peaches, 4, Bananas. You can re-order them to 1. Bananas, 2. Oranges, 3. Peaches, 4. Apples.

It might require for the developer to disable "allow-edit-tags", but it would be worth it depending on what you want to do with this component.

When I create a label with a text string that is too large, the text juts out of the text box.

                    <vue-tags-input :tags="selectedTags"
                                    v-model="typeaheadSearchTerm"
                                    :add-only-from-autocomplete="true"
                                    :avoidAddingDuplicates="false"
                                    :autocomplete-filter-duplicates="false"
                                    :autocomplete-items="usersList"
                                    placeholder="Search Users"
                                    :separators="[';',',']"
                                    @before-adding-tag="beforeAddingTag"
                                    @before-deleting-tag="beforeDeletingTag" />

I've tried using avoid-adding-duplicates and avoidAddingDuplicates. Both show the property is set to false, but it's still adding the invalid and duplicate classes to the tag.

After the component loaded whats the best way to pass information to my component that is using vue-tags-component?

First of all thank you for this plugin... it's suits perfect to my application.
Well, i am facing an issue while using data source from http. I don't want to load my server with too many requests so i choose to download the API just once. when the browser DOM is loaded. Below is my code

<template>
  <div>
    <vue-tags-input
      v-model="tag"
      :tags="tags"
      :add-only-from-autocomplete="true"
      :autocomplete-items="filteredItems"
      @tags-changed="update">
    </vue-tags-input>
  </div>
</template>

<style scoped>
.vue-tags-input .input {
  padding: 412px 10px;
  border: none;
  border-bottom: 1px solid #ccc;
}
</style>

<script>
import VueTagsInput from "@johmun/vue-tags-input";
import axios from "axios";
const token = localStorage.getItem("token");
const baseURL = require("../../config");
var _ = require("lodash");
export default {
  components: {
    VueTagsInput
  },
  data() {
    return {
      tag: "",
      tags: [],
      autocompleteItems: [],
      allData:[]
    };
  },
  beforeMount() {
    axios({
      method: "GET",
      url: url,
      headers: {
        Authorization: token
      }
    }).then(response => {
      this.autocompleteItems = response.data.map(a => {
        return { text: a.text };
      });
    });
  },
  methods: {
    update(newTags) {
      return newTags => (tags = newTags);
    }
  },
  computed: {
    filteredItems() {
      return this.autocompleteItems.filter(i =>
        new RegExp(this.tag, "i").test(i.text)
      );
    }
  }
};
</script>

Error in render: "TypeError: 对象不支持“findIndex”属性或方法"

and ie11 not support contains, find

I'm interested using this component in a html form. What would be the best way to include the tag-value in a hidden input?

If use autocomplete-items and hooks together,
than autocomplete-item click is not working.
just v-model variable have user input text.
Thanks

Hi everybody,

I'd like to use UIkit (https://getuikit.com/docs) for styling and "look & feel" of my web page (https://getuikit.com/docs/form).

As I am using sass, I would like to extend the classes vue-tags-input uses - but unfortunately I am not very good in css.

Any idea or explanation on how to do that? One big problem: I can not change the size of the placeholder :-/

Any help is highly appreciated!

Hello JohMun.
Thanks for sharing this awesome component. vue-tags-input makes me improve productivity.

BTW, I have an issue with css class names. For example, I use a legacy css file which is global style (not scoped) and that file has css class named 'content', 'tag' etc...
As you know, vue-tags-input uses scoped style, and also uses common-used class name like 'content', 'tag'.
I think that the use of common class names can cause mutual interference or conflicts.
Below is the situation I am facing.

So....Can I request a pull-request by changing the common-used class names in vue-tags-input to something like tags--content, tags--tag?
If the class name changes, It might decrease the number of users who will suffer from interference.
Thanks.

Hi, firstly thanks for a nice auto-complete tags library. My question is, as per your example, the iTunes API returns the artist id along with the artist's name and other information. Is it possible, when we want to save the data displayed in the vue-tags-input field, instead of saving the texts displayed in field, we save the id of the items instead (in your example's case is we should be getting the artist id). So TLDR, my question is how to get the item's id?

Thanks

Hi everyone!

this library is awesome! congrats!

I need to add a css class when a tag is added when it is not found by autocomplete.
how can I do that?