webworka / tagedit Goto Github PK

I have a single input field and i want to apply tagedit to it so that i can pass the local source data to it and it should return comma separated tags to the backend. For example:

My input field looks like this:

<input type="text" name="tags" id="id_tags" />

var localJSON = [
        { "label": "Hazel Grouse", "value": "Hazel Grouse" },
        { "label": "Common Quail",  "value": "Common Quail" },
        { "label": "Greylag Goose", "value": "Greylag Goose" }
    ];

$('#id_tags').tagedit({
autocompleteOptions: {
source: localJSON,
},
});

If i dont rename my input to "test[]" it gives error saying dow does not match the regular expression. And if i rename my input field to test[3-a] then the returned field becomes test[] = values, while i don't want the tagedit to rename my input field, because the backend does not recognize the renamed field. And there is no indication in documentation what does this figures in [] denote? I just want to apply tags to input field so that it should return the comma separated string, like if i select 2 tags "Hazel Grouse" and "Common Quail", it should pass to input id test as "Hazel Grouse, Common Quail". Is it possible. Please guide.

There is no autocomplete and check of duplicate tags on editing tags.
Is this intended?

can't add tags correctly if the type of id is number.
i convert my id to string to make it work.
but still hope this could be fixed.

The plugin works great when you already have a list of tags to work with but I can't see a way to create an instance of Tagedit with no existing tags. Imagine creating a new wordpress post with no tags.

<div id="some-id"></div>

jQuery(function($){
  $("#some-id input.tag").tagedit();
});

The selector doesn't match and so it would have no effect.

What do you think about changing the way you initialize Tagedit to require the input selector as an option.

jQuery(function($){
  $("#some-id").tagedit({ inputSelector: 'input.tag' });
});

It could even be a default which would make creating an instance more concise.

What do you think?

I think Tagedit is great and I would love to use it, but doesn't seem to be compatible with Bootstrap.js which is a fantastic tool...

Is there any chance to have a compatible version in the near future?

The autocomplete items support value and label properties. It might be useful to allow these to be different. For example, in the case of emails "First Last" [email protected] might be pasted into the input field. In this case, the label would be set to the display name and the value would be set to the email address. If label and value are allowed to be different, then the isNew function should probably check the value property (rather than the label property) when determining if a new input already exists.

There is no max tag option available in it, I want to add max 3 tags not more than that. If any one knows, how to do this, pls share it with me.

Awaiting response on above request.

Not really an issue, but it took me an hour to figure out. If you're using a server to provide the autocomplete list, the JSON it returns has to contain a string value for the id member of each entry. If it contains an integer, tags won't be added if they are in the autocomplete list. The critical point in the code is id.length at line 165.

In order to have my user's changes auto-saved, I need to have some sort of "tagged" event that fires whenever a tag is added, edited, or removed. I've clumsily added

$(this).trigger('tagged');

into the few choice spots in the code, but it's clearly not ideal so I don't want to do a pull request. I read this #11 but I'm not sure how to implement it the way it is recommended there.

open your test page at http://tagedit.webwork-albrecht.de/
hti save - shows Merlin as new and little owl as deleted, when I did nothing.

Remove merlin and little owl, add any tag to box, hit save. Shows nothing new, deleted!

looks like a cool deal, just needs a few bugs fixed. Also, perhaps another way to get tags into a box - so it is more clear what to do when you see the empty box - like a little icon they can click to open the dropdown list of items to pick from?

Hi, I just realized that I can solve this easily by ...

$( "#tagform" ).find('input.tag').tagedit({...});
$( "#tagform" ).find('input.anotherInstance').tagedit({...});

Hi,
thanks for this great jquery plugin!
I was using an old version of yours without the edit functionality and with that version I was able to have different tags-elements in the same form. As I need the edit functionality now I updated the plugin but now I can't have multiple in the same form anymore, e.g.:

< form >
enter some tags:
< input name="tagcloud1[]" value="test1" class="tag" / >
enter some other stuff you like:
< input name="tagcloud2[]" value="bread" class="tag" / >
< input name="tagcloud2[]" value="coffee" class="tag" / >
< /form >

In reality my forms contain between 5 and 30 tags-areas (amount changeable through javascript).

Is there a way to use your plugin this way with the never version which contains the edit functionality? Or did I just do something wrong ..... ?

Cheers and thanks for you great work and sharing it!!

please update version number in js files

When typing a new tag the comma automatically performs the same function as hitting enter (creates a new tag). When pasting (Ctrl+V) a list of comma separated words/tags (eg. tennis, baseball, hockey, sports) the functionality is lost. Hitting comma or enter after pasting will cause the whole string to become one large tag "tennis, baseball, hockey, sports" instead of automatically splitting them up.

Probably a feature request more than an issue.

A case in-sensitive option for autocomplete (match existing entries regardless of case). Currently you can have any number of tags that are the same eg. "tennis", "TENNIS" and "Tennis".

Not sure if this was fixed in the latest release but I didn't see it.

Now that the autocomplete options can be passed in as a parameter, the plugin can support a string url, array, or callback for the autocomplete source, but the isNew function needs to be modified for full support as it currently assumes an ajax source.

Hey, maintainer(s) of webworka/Tagedit!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library webworka/Tagedit is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "webworka/Tagedit",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Is it possible to make this compatible with the tabindex attribute? Ie not having to mouse-click directly into the input when used as part of a larger form.

Setting the 'allowDelete' option to false doesn't prevent the user from clicking the 'X' button on a tag and removing the tag.

Using tagedit in a ajax rich applications. And after a 10-15 pages loaded with ajax the page works a bit slower.

Is there any way to get rid of the events created when I dynamically load a new page ?

Hi,

First thanks for the wonderful plugin. I notice a bug when there is no autocompleteUrl being given during initialization.

I suggest changing line 256 of jquery.tagedit.js

from

if(options.autocompleteOptions.source != false) {

to

if(!!options.autocompleteOptions.source) {

Once again, thanks for the good work

Cheers,

When typing a tag and pressing enter (when the entry exists in the autocomplete list), it does not add it to the list. It just disappears. Even if you highlight the entry in the Autocomplete area and hit enter, it isn't added.

Can you help to me to add this in asp.net website.

I like tagedit but trying to implement in aps.net but it not performing anything.

can you tell me how to implement in asp.net websites.

please if possible can you mail me on this email id: [email protected].

Thank You for this awesome tagedit. Appreciated!

Can I create a tagedit field with default tag values?

When a value is selected in the autocomplete list, the "li.tagedit-listelement-new input" is focused. It works with Chrome (45.0.2454.93) but it doesn't work with Firefox (40.0.3).

This is copied from #18:

@tejinderss wrote:

if i use empty list tags[], allowEdit: false, allowAdd: false, dont work. I just cannot select any tag using these 2 options. What i want to accomplish is to disable adding the new tags to the list so that the user is restricted to the tags which are provided with the autocomplete.

Hello ,

I need to populate the tags in edit form . I have tried a workaround but this doesnt works, instead it creates separate input type for each value.

$tag) { $index = $tag['tag_id']."-a"; ?>

Is there any way to auto-populate the tags on runtime ?
P.s - I am using cakephp.

I created a tag containing a double quote (e.g. [1/2" Grommet]) which works great. However when attempting to edit the tag in place, it will truncate the tag at the double quote.

Hi.

Its it possible to make the autogrow function pluggable?

I'm using a different autogrow library http://jacklmoore.com/autosize/ which seems to cope well with older versions of IE

thanks very much!

I've tweaked Tagedit a little bit for my own needs, here is what I came up with:

New features:

• tag number cap
• tag length limit
• input validation through a regex
• optional class to .tagedit-list when the input text field is focused (so you can mimic an input field with a css :focus selector)

Bug fix:

• deep extend prevents breakKeyCodes to be overriden

What could be done:

• make the tag cap / length limit optional
• add a way of sending error/info messages (by passing a selector in options for instance)
• indentation needs some clean-up

I have other improvements in my mind, but it needs more thinking. Tell me what you think!

Here is the diff with the version I'm using on my project:

1c1
< /*

---
> /*
52c52
<       options = $.extend(true, {

---
>       options = $.extend({
62a63,67
>           // additions
>           maxTags: 10,
>           maxLength: 30,
>           focusClass: null,
>           validationRule: '^[a-zA-Z0-9-_]+$',
98a104,105
>       var tagNumber = 0;
> 
99a107
>       var tagRegexp = new RegExp(options.validationRule);
126a135,140
>                       if (tagNumber >= options.maxTags) {
>                           alert("Maximum element number reached (" + options.maxTags + ")");
>                       } else {
>                           tagNumber++;
>                       }
> 
152c166
<           html += '<input type="text" name="'+baseName+'[]" value="" id="tagedit-input" disabled="disabled" class="tagedit-input-disabled" dir="'+options.direction+'"/>';

---
>           html += '<input type="text" name="'+baseName+'[]" value="" id="tagedit-input" maxlength="' +options.maxLength+ '" disabled="disabled" class="tagedit-input-disabled" dir="'+options.direction+'"/>';
163c177
<                       // Event ist triggert in case of choosing an item from the autocomplete, or finish the input

---
>                       // Event triggered when picking an item from the autocomplete list, or finishing the input
177a192,203
>                                   var tagString = $(this).val().replace(/\s{2,}/g, ' ');
> 
>                                   if ((tagNumber >= options.maxTags) ||
>                                       (tagString === ' ') ||
>                                       (tagRegexp.test(tagString) === false))
>                                   {
>                                       $(this).val('');
>                                       return;
>                                   }
> 
>                                   tagNumber++;
> 
180c206
<                                   html += '<span dir="'+options.direction+'">' + $(this).val() + '</span>';

---
>                                   html += '<span dir="'+options.direction+'">' + tagString + '</span>';
182c208
<                                   html += '<input type="hidden" name="'+name+'" value="'+$(this).val()+'" />';

---
>                                   html += '<input type="hidden" name="'+name+'" value="'+tagString+'" />';
202a229,230
>                                       if (tagNumber > 0) tagNumber--;
> 
251a280,289
>                       })
>                       .focusin(function() {
>                           if (options.focusClass != null) {
>                               $('.tagedit-list').addClass(options.focusClass);
>                           }
>                       })
>                       .focusout(function() {
>                           if (options.focusClass != null) {
>                               $('.tagedit-list').removeClass(options.focusClass);
>                           }
253d290
< 
261a299,300
>                           tagNumber--;
>                   
412c451
<               if(elementValue == compareValue) {

---
>               if(elementValue === compareValue) {

allowEdit flag is being ignored. Either I set it to true or false, the user can allways delete tags.
On http://tagedit.webwork-albrecht.de it reads:
"allowDelete
Switch on/off deletion of entries. Will be ignored if allowEdit = false
default: true"

So if it is set to true, delete is permitted
If it is set to false, it is ignored, so delete is also permitted? :P

You can see the behaviour here: http://www.foxhall.de:8080/doc/add/

As you will see, you can manually add, edit and delete tags and everything will work as expected. However, when you type more than three characters, the server will return a JSON list of dictionaries (I copied the format of the PHP autocomplete example in your server directory) and irrespective of what break character is then typed, the pre-existing tag is not added to the input field. It just disappears.

The code for the example that I am using is here: https://bitbucket.org/cfarrell1980/contractualsugar/src/f9ab9014e65b/templates/doc_add.html

There was another issue previously which dealt with much the same problem. That was solved 11 months ago, with the release of version 1.2.1. I am using the most recent version in github, however.

If I set a tag to 'delete' with the tag edit options, then may I want to change this state in the future. That is impossible now, because the edit option is 'off' for 'd'. May it is better to distinguish between 'a' = active, 'i' = inactive and 'd' = deleted.

While I'm trying to play around the Tagedit webpage using Chrome. It flooding the following message in the console.
"event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future."

The below regex would cause problems for input names generated by web frameworks like Symfony and Rails. Often you'll see a name with more than one use of square brackets.

var baseNameRegexp = new RegExp("^([a-z0-9_]*)\\[([0-9]*?("+options.deletedPostfix+"|"+options.addedPostfix+")?)?\]$", "i");

How about changing it to something like the below?

var baseNameRegexp = new RegExp("^(.*)\\[([0-9]*?("+options.deletedPostfix+"|"+options.addedPostfix+")?)?\]$", "i");      

If I type some tag, click out from tag field, and I press submit button, the tag will be empty.

The thing is, I want to work with the tags on-the-fly and was trying to figure out how to use this Plugin, without haveing the user to push a button to submit changes, but react on changes directly via JS.

It would be very cool if I could access the list of tags after changes (delete, new, changed name, etc.) and process them via ajax or even submit the form to an iframe.

Or did I miss something in the documentation?
Thanks for your help

I'm working with the native setup and want to add a new item after a jQuery ajax call. data.success contains a string that is comma delimited:
[email protected],[email protected],[email protected]

I want to parse the string and add to my tags[]:

var new_recipients = data.success.split(",");
$.each(new_recipients,function(index, chunk) {
     /* What do I do here? */
});