yairEO / tagify

🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
https://yaireo.github.io/tagify/
Other
3.49k stars 430 forks source link

Question about key/value tags #70

Closed pesseyjulien closed 6 years ago

pesseyjulien commented 6 years ago

Hi,

is it possible to have key/value tags in the whitelist ? So the value is display but the key is used when sending the form ?

Thanks, Julien

yairEO commented 6 years ago

Ok, I will add support for this. very reasonable.

Hopefully will be done by the end of this month.

pesseyjulien commented 6 years ago

Nice, thanks a bunch :)

yairEO commented 6 years ago

Done as part of version 2.0.0

you can take a look at the docs

pesseyjulien commented 6 years ago

Great, thanks !

Just a small issue, I'm getting the following error with version 2.0.0 :

Uncaught ReferenceError: isIE is not defined

yairEO commented 6 years ago

Thanks. fixed

https://github.com/yairEO/tagify/commit/3e498dd060370a3c80b132c82e259ffadfa67b82

pesseyjulien commented 6 years ago

Thanks !

Two small questions :

1- after updating to 2.0, I'm getting the following formating (original input is visible). Do you have any idea why ?

capture d ecran 2018-06-19 a 11 44 13

2- I tried the key/value array for the whitelist, but when I'm sending my form the values are behind sent, and not the keys. Here is my code:

var allowedTags = [{"value":"Copa del Rey","data-id":"331"},{"value":"Copa Argentina","data-id":"603"},{"value":"Copa Libertadores","data-id":"420"},{"value":"Ta\u00e7a da liga","data-id":"445"},{"value":"Ta\u00e7a de Portugal","data-id":"402"},{"value":"Ligue 1","data-id":"24"},{"value":"Ligue 2","data-id":"104"},{"value":"Coupe de la Ligue","data-id":"362"},{"value":"Serie A","data-id":"21"},{"value":"Coupe de France","data-id":"361"},{"value":"Liga","data-id":"23"},{"value":"Premier League","data-id":"8"},{"value":"Champions League","data-id":"5,232"},{"value":"Bundesliga","data-id":"22"},{"value":"Ligue Europa","data-id":"6,524"},{"value":"S\u00e9lections","data-id":"88,336,342"},{"value":"CAN 2017","data-id":"190"},{"value":"Euro 2016","data-id":"3"},{"value":"Championship","data-id":"10"},{"value":"League Two","data-id":"12"},{"value":"League One","data-id":"11"},{"value":"League Cup","data-id":"2"},{"value":"Football League Trophy","data-id":"7"},{"value":"FA Cup","data-id":"1"},{"value":"Scottish PF League","data-id":"14"},{"value":"LaLiga 123","data-id":"102"},{"value":"Segunda B","data-id":"542"},{"value":"Primera Division","data-id":"724,384,240"},{"value":"Liga MX","data-id":"199,385"},{"value":"Copa Sudamericana","data-id":"369"},{"value":"Copa America","data-id":"128"},{"value":"Copa MX","data-id":"775,598"},{"value":"Liga Aguila","data-id":"371,589"},{"value":"Ascenso MX","data-id":"690,701"},{"value":"Primera B Nacional","data-id":"627"},{"value":"2. Bundesliga","data-id":"87"},{"value":"Scottish Championship","data-id":"91"},{"value":"Lega Pro","data-id":"167,357,728"},{"value":"Coppa Italia","data-id":"259"},{"value":"Jupiler Pro League","data-id":"112"},{"value":"Lega Pro A","data-id":"167"},{"value":"Lega Pro B","data-id":"357"},{"value":"Lega Pro C","data-id":"728"},{"value":"3. Liga","data-id":"374"},{"value":"Copa Libertadores","data-id":"420"},{"value":"MLS","data-id":"98"},{"value":"Liga Nos","data-id":"99"}];

    
   var tagify = $('[id=competition]').tagify({
   enforeWhitelist: true,
   whitelist: allowedTags
    
   });
    
   var tags = tagify.data('tagify');
   tags.addTags([{"value":"Ligue 1","data-id":"24"},{"value":"Coupe de la Ligue","data-id":"362"},{"value":"Coupe de France","data-id":"361"}]);

Thanks in advance for your help, Julien

yairEO commented 6 years ago

@pesseyjulien - did you also update your code to use the new tagify's CSS file?

maybe it's also a cache thing, so the old CSS is used and not the new one, if the server is configures with some sort of cache-control.

Regarding the bug with the values saved on the original input (which is being sent to the server):

I've updated the code to address that, and added a new setting called mapValueToProp. see README

Thanks for reporting!

pesseyjulien commented 6 years ago

Perfect, completely forgot about the css :)

Working like a charm now. Only downside is, it automatically adds quote (") around each tags now, which was not the case before. I can remove them programmatically, but could it be optional ?

yairEO commented 6 years ago

hmm, I added the quotes because I wanted to have the ability to add tags which have commas, for example:

Tag 1 : NY, new-york Tag 2: 'Paris, France'

This works when Tagify is initialized with an empty delimiters setting, so commas won't trigger a new tag and be stripped away.

The output of the above example would be: "'NY, new-york', 'Paris, France'"

But, in your case, if all the values should be Numbers instead of text, then I guess I can go over all the tag's values and check if all are numbers and if so, skip the part where it wraps each item in quotes

pesseyjulien commented 6 years ago

I see, well I have string tags also, so don't bother ! :)

I will handle this on my side.

Thanks for the update !