Another (hopefully small) feature what I thought would be nice (for me needed, lol):

Add possibility to limit the amount of tags.

So, basically, once you hit a certain amount (for example 4), it won't allow you to add any more tags.

I hope I am not becoming annoying here :)!

I am using following code to prevent from getting duplicate values but neither console log is working nor duplicate true setting.

jQuery(document).ready(function($) {
		$("#tags").tagify({
			delimiters: ",",
			enforeWhitelist: true,
			autocomplete: true,
			whitelist: ["foo", "bar", "foo bar"],
			suggestionsMinChars: 1,
			duplicates: true,
		}).on("duplicate", function(e, tagName) {
			console.log("duplicate" + e + " " + tagName);
		});
});

I have installed tagify from npm and I relaized there is an old version on npm.

Maybe it would be a good idea to autorelease new git tags into npm

I just discovered Tagify and wanted to play with the examples. For some reason, all the examples except the first broke. I'm not sure why, but it has something to do with the input not clearing on tag added.

Video: https://www.dropbox.com/s/a0cnfij4z0cg5do/Tagify-broken.mov?dl=0

I found this from the StackOverflow question, and I think it really is the best plugin for tagging out of the list.

But why is it not using normal HTML elements? I think that would make this plugin perfect.

Hi,

is it possible to set and get tags programmatically via JS like here

if not, can you add those functions?

thanks

Currently, I have an issue where I have around 330 whitelisted items. Issue what it has is when it loads all together at once when I started typing, the browser becomes laggy. I don't have that shit computer, so I assume the most user would have the same issue. So, there is 2 recommendation, to add to autocomplete (or at least add a setting option for possibly support it!)

1. Reduce the length of displaying all options and add a search bar to it. The search bar part should be an option not recommended, as if there aren't that many searchable options, it might become more pain, but having that option when whitelist is bigger, will help a lot! Below is example picture what another datatable plugin is using (Not tag support tho, ;))
   
2. Add option from when it will start autocompleting. Usually, it is the third character. This should be also an option, as if there are few characters, having it from first adds to the user experience. If you have however 330 whitelisted options, loading on the first character can be discouraging.

Also side note: That arrow what you disappeared actually destroyed a bit friendliness. I usually try to think that all clients are actual dumb-users and if they see box, but no way to open the option list, it can be confusing to them. It is not that huge of an issue to me, as I simply reversed the CSS file commit, but just a small thought I had.

Also, is it possible to donate for this project? I feel like you have done quite a lot, especially recently.

Hi, me again :)! I hope I am not getting annoying, as I truly think this is one of the best tagify libs out there. So I am suggesting things what makes sense, what are kinda needed in my current project and so on.

The first bug: Took me a while, when I didn't see that any updated weren't synching. Apparently, min.js is not same as just js. For an example that auto-add tag doesn't work there. Else, awesome job!

When the input doen't have value set, it's readonly and it becomes tagify then instead of an empty box it becomes a single line.

How can i use this Plugin / Javscript with Bootstrap 4?
If i use the Bootstrap 4 Form-Controls i see the input twice. Have a look here

My HTML-Code looks this:

<fieldset class="form-group">
<label for="tags">Tags (Limit 5)</label>
<input name='tags' placeholder='write some tags' value='foo, bar, buzz' class="form-control">               
</fieldset>

But when i look into the generated code i see that the input will be transformed to a Element. So there comes the problem that i see the input twice i think.
How can i use it correctly with bootstrap 4? Can you help me? Or someone else?

Hello,

I don't see in demos if it is possible to add a tag by calling a method in javascript.
I tried this without success. Is there a way?

var elm= $('#myInput').tagify();
elm.addTag('myTag');

Not sure if it's related by bootstrap (since the demo works fine for me) but anyways, here is how the fresh setup looks like:

background doesn't work at all for tags. Probably caused by the opacity and z-index in the tags tag > div::before.

When I remove the z-index from it:

Then in the tags tag > div > span change the opacity to .9 to make it work:

If you set the opacity to 1 it will not work.

This is known behaviour when using animations + z-indexing.

Using latest Opera browser. Doesn't work in Chrome neither.

Hey,
How can I send tags with ajax?
Thanks.

This might be harder (and not sure if possible), but if you could add into a white list of arrays ($id => $label) or something similar would be cool.

That means: In tag lists, it will add and show a label, but when saved, the input will save/use the actual set id.

This is a necessary feature if this project is used in larger databases OR there are the possibility of two same name strings.

Can you please implement a new setting parameter that allows us to set how many suggestion the whitelist should display?
if not that, a callback on the event "on change" would be good too to actually manually handle the whitelist and displaying a maximum number of results. basically something like this :

function(request, response) {
        var results = element.filter(myarray, request.term,maxSuggestions);
        response(results.slice(0, maxSuggestions));
    }

Also please release a pre-compiled version of this to be implemented on vanilla html without needing pre-processors.

Also to correctly display the input like it's supposed to be displayed in the demo i had to manually hide the element i "tagified", i think it should be integrated in the tagify() function itself to actually hide the element that will only hold the value.

Great job btw!

Apparently, it is still not working. When I select a tag from whitelist (I start typing and then select or press enter), it won't be added to a tag list, still, have to double enter, to add it.

Related to issue #8

Thanks for the tagify & for the addition/fixes!

The closing bracket at the whitelist row must go to end

tagify = new Tagify( input, {
    duplicates: true,
    whitelist: ['foo', 'bar']},
    callbacks: {
        add : onAddTag // calls an imaginary "onAddTag" function when a tag is added
    }
);

Hi and thank you for the nice js lib.
I have run onto a problem;
When i remove a tag the hidden input element is removed from DOM.
The bug also happens at your live demo page.
Please see the following screenshots.
At the first screenshot I highlight the hidden input before taking any action and at the second screenshot I delete a tag, as you can see the input element is removed.

Hi,

How can I make sure the field is not empty ?
Html tag 'required' is not working anymore using tagify.

Thanks in advance,
Julien

May I suggest a new feature: A list of matching tags showing in a list while you type in a tag.

For example, you type in #j and the list shows 5 available tags containing a "j". Typing #jq and the list is limited to tags containing "jq". User may select one of the matching tags from the list.

Anway, nice work you did with tagify 👍

I want to delete the tag and specify its id to save in the database then how do?

Firefox 55.0.0.2 on Ubuntu

Using the most recent commit from the GitHub repo and the demo index.html.

1. Type, "A#" to display two whitelisted suggestions
2. Use the down arrow on the keyboard to select one of the suggestions
3. Rather than the selected suggestion being added to the field, the typed letters ("A#") are added

The behaviour is as expected in Chromium 60 on Ubuntu. The behaviour is expected in both browsers if the mouse is used instead of the keyboard to select one of the suggestions.

I will look at this myself now but any suggestions welcome.

Right now, if you pass tag what isn't whitelisted, it still gets activated and then immediately removed. This basically means right now I have to do double work

1. Add whitelist
2. Check in function again if it is in whitelist.

If you function details, there could be a parameter: "Passed whitelist" related, would be cool and make life easier.

1ca0945

Line 162: || should be &&
Every single character is added separately right now.

I am trying to use tagify in one of the pages to implement tags and auto-suggestions.
The problem I am facing in safari is that the suggestion dropdown comes with a plain html dropdown menu and also selecting a keyword from the list of suggestions does not create a tag. Not sure if this has been reported before, but I do not see it in the list of issues here.

Have the code support dynamic suggestions list which might come from the server using AJAX

Actually this is only a Chrome issue which might get fixed very soon

https://bugs.chromium.org/p/chromium/issues/detail?id=375637

"staring" it

I don't see a destroy method in this library. Do you have a recommended way of destroying ta tagify-ed element. Or at least removing the tags from it?

Any interest in creating a UMD build/dist?

Can I use this with Vue JS or do I need to use as a Vue component?

Thanks for making Tagify!

I'm trying to basically 'reset' tagify fairly often based upon new information grabbed from a database. When I do that, I want to essentially remove all the old tags and start from scratch OR add tags retrieved from the database.

I saw the new 'destroy' method, which I'm attempting to use like this:

tagify.destroy();
When I try that, I get the following error:

Error in event handler for (unknown): TypeError: Cannot read property 'destroy' of undefined

However, tagify is definitely defined as I can run the tagify.on('foo') event handlers and it's working very well in all other respects. I imagine I am using the destroy method incorrectly, but I'm not sure how. If someone could please provide an example with real code that would also be very helpful.

Thanks!

Jake

Tags color not working when we set background color for parent div or container.

For example:

<div style="background-color: black">
    <input type=text id="tg">
</div>

<script>
    var tag = document.getElementById("tg"),
        tagify1 = new Tagify(tag);
</script>

First of all, great job on the library. I love the design.

I have a short list of suggestions that I'd like to always show to the user. I set suggestionsMinChars to 0, but it seems the suggestion list is only triggered inside callbacks.onInput. It would be nice to have this as a custom event or method so we can manually trigger the suggestion list.

Alternatively, you could also add the functionality that if suggestionsMinChars is 0, the suggestion list is shown as soon as the input gets focus.

Hello guy!

First of all, congratulations for you lib. In my opinion, it's simple and easy to use as all lib should be!

What I am trying to do and I am not being able is to reset the input after form to be successfully sent. I have a single page application, so my page will not reload after form submit. Looking your code, I have tried the following solution:

// In my angular directive I store all tags in an array called "tags"
scope.reset = function(){
  for (var i = 0; i < tags.length; i++)
    tagify.removeTag(i); // tagify is the instance of your component
};

So, I run this code after form submit. However, just some tags got removed. Other ones are still there and I couldn't understand why... 🤔

Could you help me?

UPDATE
As workaround, I have solved it destroying and intantiating the component again. Working fine.

Hello,

I have the following error on IE11
"Object doesn't support property or method 'findIndex'"

In the following line in jquery.tagify.min.js
function(t){var e=this.value.findIndex(function(e){return t.toLowerCase()===e.toLowerCase()}

It's seem that IE11 doesn't support findIndex
https://stackoverflow.com/questions/41938036/object-doesnt-support-property-or-method-findindex-ie11-javascript-issue

Maybe you do not support IE11?

Thx in advance

Please can I use ajax auto complete with this?

Please allow pull request, I added a little feature and want to share it!
Thanks!

Hi, I have a question about this ...
the plugin has option input only numbers?

how to add other delimiter, because my project need use "," and " " (comma and spacebar) ????

sincerily
MMR

Hi,

I'm trying to use the 'removeAllTags' method with the Jquery version, but it won't work. I took example on yours (https://yaireo.github.io/tagify/), which is throwing a 404 btw.

Thanks in advance for your help,
Julien

hi . i'm try to set duplicates option to false but Still typing duplicates values is enable.
can you fix this issue please ?

Hi,

Great Plugin ! Only drawback is that it adds an extra space after every comma, so the output list will look something like : test, test1.
Could it be possible to add an option so it would be : test,test1 ?

Thanks in advance for your help,
Julien

Hello, I have this piece of code

$('.tagify').each(function () {

            var $toTagify = $(this);

            $toTagify.tagify({

                duplicates : false

            });
            
            $toTagify.on('add', function (e) {
                console.log(e);
                console.log("test");
            });

        });

but the events are not triggering. Am I wrong or there's something that doesn't work properly?

Would it be possible to tag a new version so that the latest code can be used with Bower? I see that Bower config is on v1.0.5 while NPM is v1.1.0. Looks like the latest version has some improvements we'd like to use.

Hi,
it looks greats but it dont support force to select from some specific items.
it exists and i can not see that or could you add it?
thank you

Only 5 Tags can be input? No matter how long or short the text is, only 5 tags can be entered.

Just need to know if the tags can be fetched via ajax

Hi,

Can the plugin support an array of key => value as tag ?
I mean something like that : <tag data-id="1">...</tag>

I use the plugin with an user system and filtering users with name is not that good.

Thanks :)

Hi,

When using autocomplete & whitelist options, if you select an option from the list, it does not add it as a tag. You need to press enter.

Select

Result

Normal ?

Hi

I know I can add tags when rendering the tagify component, like so:

<input name='user-tag' value='apple, orange, banana'>

But in my case, I have a service which returns tags to show, but unfortunately this returns after the tagify component has been rendered. So I would need to add the tags later programmatically, like

$('[name=user-tag]').Tagify.addTag('kiwi');

But this is currently not possible. Can this feature of adding tags programmatically be implemented?

Thanks 👍

Right now when you search from lsit, you have to do double enter to add it into list. It is bad design, when I use whitelist only method and once person chooses from autocomplete list, they cannot change it anyway (will be denied straight away). So it would be good to add setting/option where selection from autocomplete will go straight into the tag list as approved tag.

Sidenote: Thank you for this up to date tagify. I like it a lot and if those last 2 quality updates will be added, would be cool! Right now there are million of tagify libraries, but this seemed easiest and best one by far.