hailwood / jquery-tagit Goto Github PK

If I'm typing in a tag, say for instance "oatmeal", and I have [space] set as one of my triggerkeys, if I type the "l" and then hit space really fast, then the tag is not completed.

When I save a tag, for example, "Cool&stuff" I save correctly the tag, but when I try to display it, I will see escaped chars for example "Cool&.amp;stuff". (I put &.amp because this editor fix the html entity)

When you are using autocomplete the script is bypassing the maxTags settings completely with _addTag() running from the autocomplete’s select event:

this.options.select = function (event, ui) {
    self.input.data('autoCompleteTag', true);
    clearTimeout(self.timer);
    if (ui.item.label === undefined)
        self._addTag(ui.item.value);
    else
         self._addTag(ui.item.label, ui.item.value);
    return false;
}

I might be able to submit a patch later, but don’t bet on it. Would be appreciated if someone else could pick this up and pull.

Pre-populated li cascade to subsequent tagits when I have multiple on a page and they are instantiated using a class selector.

From my experience with user behavior:

They type in one tag and there is a suggestion in the auto complete. They do not understand that they have to press key-down to select the item from the suggestion. When there is only one tag appearing they presume they can click tab, enter or the other dedicated trigger keys.

I must fix so that the tag is selected only by pressing trigger key. It should not be necessary to "key down". Have anybody done a fork with that functionality already?

how can i call multiple tagits? i have problems with tagsChanged function for each instance. i dont get the tags from target. it just returns me undefined values for string :( thats my code:
jQuery("input#field1, input#field2, input#field3").each(function(){
var target = jQuery(this);
target.hide();
var currenttags = target.val();
target.after("

• "+currenttags+"

Hi everyone,

I just ran into an issue with tagit that excludes the select form element from being submitted when clearing a previously entered tag list. Has anyone else seen this issue? If so I'm curious to see the workaround. In the meantime I'll share mine below:

tagsChanged: function(tagValue, action, element) {
    var tags = TFW.widget.Tag.getTags($("#"+tagListContainer).tagit("tags"));
    if ($.isEmpty(tags)) {
        $("select[name='"+tagFormInputField+"']").append('<option selected="selected" value=""></option>');
    }
}

In a nutshell I'm simply adding an empty select option if the tag list has been cleared. Also, there's a bit of my own code such as $.isEmpty, which checks for empty string, and TFW.widget.Tag.getTags, which simply retrieves the tag list.

Thanks!

Just noticed that updating jQuery UI from 1.8.24 to 1.9.0 breaks Tagit ...

when having multiple instances of Tagit (with different tags) all of them display all the same tags.

Hi,
I actually need group tag support where a tag would actually map to an list of tags and their corresponding values.

Is it possible to do this?
I'd be grateful if someone could help me with this.

Thanks.

When a user switch to another form field, the currently typed word is lost.

There's a major flaw in latest tagit update preveting users from inputing URL's in tags.
Reason is in using keydown method to catch keyCodes, except of keypressed to cathh charCodes. So as a result keycode 59 for semicolon, that should finish tag input, now also yeilded for colon, because key is the same, but charCode(ASCII) differs.
I'll work on a fix for that and make a pull request

I don't want to use autocomplete. Can the dependency be removed? Or is it impossible?

Hello,

When i put a comma it is not considered as an accept keys. When i replace 44 by 188 it works. In fact it seems that depends on the browser but i don't exactly which configuration works and which doesn't.

how can I do to allow duplicate tags?

If I enter a tag and immediately hit the submit button the blur never fires to save the tag.

Is there a call I can make to "save tags" that haven't been already saved via blur, Enter, Tab, or Comma?

http://screencast.com/t/YTKosTeBTRb

If there was something like $('#tags').tagit('Save'); I could call it on the form submit.

When moving with the arrow keys in the select list the input box shows the item value instead of item label. It is not user friendly to show data value numbers when they should see the corresponding label (the one shown in the select list).

How can I fix this?

Hi, nice jquery plugin.

i wonder if can reload the tag source once i added a new custom tag, i managed to save new tags in the database, but i will need to add the tags that i have just created to the tag source (autocomplete), cause i will need it again and i can't refresh the page (i use only ajax querys)

Please advise !! thank you.

UPDATE : i found a solution by changing the fill function :

    //newtagsource is an array passed form the fill call, it contains the label,value keys, generated from the database after i
   //insert a new tag, so the autocomplete will recognize it in the next add form 

    fill:function (tags, newtagsource) {
        if (tags !== undefined)
            this.options.initialTags = tags;

        $(".tagit-input").autocomplete( "option" , "source" , newtagsource )
        this.reset();
    },

I need to be able to store an id that is associated with a tag that would not be displayed to the user. Maybe by adding a data parameter to _addTag function that would take the elements data attributes?

jQuery UI's autocomplete plugin allows scrollable results in a simple manner only by changing some css:
http://jqueryui.com/demos/autocomplete/#maxheight

Unfortuntely, Tagit prevents the scrollable results dropdown due to a blur timer (see the commented if statement):
this.input.blur(function (e) {
self.currentLabel = $(this).val();
self.currentValue = $(this).data('value');
/_if (self.options.allowNewTags) {
self.timer = setTimeout(function () {
self.addTag(self.currentLabel, self.currentValue);
self.currentValue = '';
self.currentLabel = '';
}, 400);
}/
$(this).val('').removeData('value');
return false;
});

It would be really useful to enable this feature in the plugin. Perhaps as a plugin option? My use case scenario involves a great number of autocomplete results that must be displayed in a limited area, so the scrollable results would be very suitable.

It would be great if Tagit would have an option to use a text field as its backing store instead of a select list. This would allow for graceful degradation, where a user could use a simple text field to enter tags. Another case is that in my Orchard module, I don't want it to rely on a specific UI, so I want to go with a text field as the default option. Then Orchard Themers can go ahead and leverage Tagit to beautify the tag editing experience. This tagit plugin uses a text field: https://github.com/aehlke/tag-it. The primary reason I am choosing Hailwood Tagit over Aehlke is because I don't think I want to be dependant on jQuery UI's themeroller themes. For the rest I haven't lookedinto depth.

I'm not technically expert enough in javascript to propose to take over this project.
But I should mention that I have used this project more than a couple of times. It's unique, responsive and very native. I don't think Select2 comes even close to it.

I Hope its development continues.

I'm getting

Uncaught Error: Runtime error in tag-it (/static/lib/js/tag-it.js) on line NaN:
Object function ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
} has no method 'widget'

I included jquery ui /* jQuery UI - v1.9.2 - 2012-11-23 */
The latest download from tag-it

Thanks

I'd like to be able to programmatically remove tags. Right now we can "add" tags, but there doesn't seem to be an easy way to remove one. Of course I could first get the current tags using the "tags" method, manipulate it, then set it back using the "fill" method, but that's a lot of work as compared to just calling "remove".

(FYI: my use case is that I have "bound" the tags list to a list of checkboxes: when a user unticks a checkbox, the related tag should be removed).

Thanks for this great plugin!

When I use $('#my-ul').tagit({triggerKeys:['enter', 'tab']});

The resulting triggerKeys array in the tagit options looks like this:
['enter', 'tab', 'comma', 'tab']

Passed values only overwrite individual values in the array, so if fewer options are passed, the later indexes in the array remain. To get the behavior I desired (tags can include commas or spaces), I had to use:
$('#my-ul').tagit({triggerKeys:['enter', 'tab', 'asdf', 'asdf']});

Hello,

I had a problem with initial tags. When i use this code :

      <script>
      $j = jQuery.noConflict();
      $j(document).ready(function($){
          $('#tags').tagit({'select':true});
      });
      </script>
      <ul id="tags" name="dictionary_tags[]">
                <li>test</li>
      </ul>

I have an error "value.replace is not a function". I appears that the problem is on the initialTags function. I replace this code

       if (this.options.initialTags.length != 0) {
            for (var i in this.options.initialTags)
                if (!this._exists(this.options.initialTags[i])) {
                    this._addTag(this.options.initialTags[i]);
                }
        }

by

       var object = this;
        if (this.options.initialTags.length != 0) {
            this.options.initialTags.each(function (i){
                object._addTag(i);
            });
        }

and now it works.

For information i'm using jquery 1.6 and jquery UI 1.8

Just started using jQuery-tagit today, and it works great! One feature I'd like to request: I have a use case in which certain initial tags should be "locked" so that they can't be removed from the list. I'd like to handle this by creating the list elements for those tags with a special class, and then adding some CSS styles to display tags of that class in a different color and with the tagit-close link hidden.

What about tag editing support, is it planned?
Click on a tag could enable editing and have tag text selected in case user wants to copy it to clipboard.

If you define 'maxLength', the user is still allowed to enter as much text as he wants, the tag is added in full length and only truncated after a reload of the page. This should be limited during entering to prevent truncated strings and not confuse the user.

see pull request #74

In the most recent version there's still a console.log call left in the code.
Line 131: console.log(this.timer);

triggerKeys option does not work properly, and absolutely not usable

1 With this option triggerKeys:['enter', 'tab'] - comma still work for tag completion !!!
2 With this option triggerKeys:['enter', 'tab', 'space'] - comma does not work for tag completion. Cool I can use commas in tags I thought. But when I click on enter, ma string separated on tags on commas!

The oddly but I found these issues in 2 minutes of tests. Is your library usable on it in alpha yet?

Thanks.

I had an issue in deleting tags which contains the character '.
The value wasn't removed in the select.
So I changed the _popSelect method :

 _popSelect: function(text) {
    // before
   // this.select.children('option[value="' + text + '"]').remove();

    this.select.children().each(function(index) {
        if($(this).val() == text) {
            $(this).remove();
        }
    });
}

That works :)

When I am trying to use this plugin in my rails application , using firebug, it shows this error in the tagit.js file:

tagit.js:10Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'widget'

And the plugin does not load giving this error :

Uncaught TypeError: Object [object Object] has no method 'tagit'

When I am using this html code:

https://gist.github.com/2896107

I'm having troubles with the same snippet of code as the one mentioned in the closed issue ticket, except it's the updated code I'm working with (in combination with jQuery 1.6.1 and UI 1.8.9).

It tells me that the object in this.options.initialTags has no method each.
I've tried working around it in several ways, but am not having any success so far.

I've changed the loop to state "$(this.options.initialTags).each(function (i){" in order to solve the each method thing, but now it seems that the script as a result quits on an impossible value.replace function within _addTag itself.

Am I perhaps overlooking something?

I would like to mimic email entering, so I'd like to provide a custom delimiter (e.g. semicolon)

Or even better, provide the regex to split, myself...

(I'll try to implement and do a pull request... )

in case when allowNewTags is set to true, i want the option field added to the select tag to have a blank value. eg <option value="">New Tag</option>
How can i do this ?

The "tagsChanged" event passes either the tag's value (if available) or the tag's label. In my use case this is somewhat bothersome, because when the user adds a tag that is not yet part of the tag source, I receive a label. If the tag is already part of the tag source, I receive its value. As far as I know there is no easy way to know wether I receive a value or a label. So perhaps it would be good to receive the full tag object as a third parameter? E.g.

var onTagsChanged = function (labelOrValue, action, tagObject) {

   alert ("label: " + tagObject.label + ", value: " + tagObject.value );

 };

In tagit.js 314 line is console.log to remove.

https://github.com/hailwood/jQuery-Tagit/blob/master/js/tagit.js#L314

Although everything is working just fine while I'm adding and removing tags on a clean setup, once I save the data and pass it back in to pre-fill the tags they seem to no longer delete themselves from the select.

More Info:
I set up my ul element to have a name of pictures[] so that the select element would also be assigned a name with brackets. When the form is submitted I simply implode the resulting array and save it to a database. When I load the page I check the database and auto fill in the form by passing a string directly into the $('#id').tagit(). While it appears that the items delete on the surface (the tags disappear when the x is clicked) the select element is still passing items through in the array once they've been deleted. Do you think it has something to do with the fact that they were auto filled in to begin with? Sorry, I'm a complete Javascript noob so sorry in advance if I just did something stupid.

There seems to be a bug in the keyup event handler that I only noticed in IE (other browsers seem to ignore this error).
It happens when I backspace tags:

_"pasteMetaKeyPress is undefined".

It looks like this is the problematic code:

this.input.keyup(function (e) {

                if (_pasteMetaKeyPressed && (e.which == 91 || e.which == 86))
                    $(this).blur();

                // timeout for the fast copy pasters
                window.setTimeout(function () {
                    _pasteMetaKeyPressed = e.metaKey;
                }, 250);
            });

Since _pasteMetaKeyPressed is a member of the "self" variable", It can be fixed like this:

this.input.keyup(function (e) {

                if (self._pasteMetaKeyPressed && (e.which == 91 || e.which == 86))
                    $(this).blur();

                // timeout for the fast copy pasters
                window.setTimeout(function () {
                    self._pasteMetaKeyPressed = e.metaKey;
                }, 250);
            });

If input '.tagit-new .tagit-input' has inline styles in will lose it after entering new long tag.
The problem is in
if (isValidWidthChange) {
//input.width(newWidth);
input.css('cssText', "width: " + newWidth + "px !important");
}

As soon as first tag is added all the elements defined after the tag field shift down slightly. This can be observed in the demo page as well.

tagit-simple-grey.css has following CSS which seems to be causing this issue

ul.tagit li.tagit-choice {
    background-color: #f7f7f7;
    border: 1px solid #f2f2f2;
    padding: 2px 13px 3px 4px;
}

ul.tagit li.tagit-new {
    padding: 2px 4px 3px;
    padding: 2px 4px 1px;
    padding: 2px 4px 1px 0;
}

If the CSS rules are changed as following then this problem seems to go away.

ul.tagit li.tagit-choice {
    background-color: #f7f7f7;
    border: 1px solid #f2f2f2;
    padding: 2px 13px 1px 4px;
}

ul.tagit li.tagit-new {
    padding: 2px 4px 3px;
}

Also, I am noticing these CSS rules are defined differently for other theme colors.

Please replace the line

if (self.options.allowNewTags) {

to

if (self.options.allowNewTags && self.currentLabel.length >= this.options.minLength) {

to discard tags shorter than defined minLenght value on blur

I checked the demo page after you merged my commit. It looks like you posted the updated HTML, but I don't think the JavaScript was updated since the limits are not being enforced. The updated version of tagit.js needs to posted as well. :)

I am using tagit inside a jquery-ui dialog: if the user types a tag without pressing space or anther trigger key and then presses the "save" button of the dialog, the last tag he typed is not saved.

It would be nice to have a method to trigger the tag programmatically, so that I would call it when "save" is clicked

If you click in any tagit input are then try to visit another page you get:
Uncaught Error: cannot call methods on autocomplete prior to initialization; attempted to call method 'close' jquery.min.js:2

Problem is that in input blur timer is set for 400ms, which then calls _addTag.
When we visit another page DOM changes autocomplete instance is removed, so attempt to all this.input.autocomplete('close').val(""); results in an error.

Solution would be to bind window.blur or hashchange and add clearTimeout and all 'destructor' routine of the plugin.
I will implement local workaround for now.

When I read the list of tags with tagt('tags') I get a mix of tags and objects containing label and value attributes. Looking in the code, _addTag() is used either with only label, or label and value, which causes this distinction.

Is this really the intended behaviour? If so, what could the purpose be of having these mixed in tagsArray? Thanks for any pointers!

This occurs if allowNewFlags:true.

When you get the complete-list when typing a word, and click on that word, it seems the blur event fires before, so that you don't get the tag you clicked on but instead get only the characters you've typed so far.

If allowNewFlags:false this behaviour does not occur.

Hello

I'm going to set tag by click functions,
but I had a problem with initial tags. When i use this code :

$(".tag-a").click(function(e) {
    e.preventDefault();
    var tags = $('#ul_tags_input').tagit('tags');
    var tag = $(this).find("span").html();
    if(tags.indexOf(tag)<0){
        tags.push(tag);
    }
    $("#ul_tags_input").tagit("destroy");
    $("#ul_tags_input").tagit({initialTags:tags});
});

It looks like every tag get an extra "x" after $("#tags").tagit({initialTags:tags})
I think it's because of: $(this).text() get a x from x of

self.options.initialTags.push(
    tagValue ? {label: $(this).text().slice(0,-1), value: tagValue} : $(this).text().slice(0,-1)
);

Hello,

I just started using this plugin and noticed that if I pass the initialTags as an option, instead of using an HTML list, they do not show up.

Looking at the code, it looks like the _create() method on tagit.js is discarding the option with self.options.initialTags=[];

I tested it without that line and it worked fine, can someone who knows the code check it? Thanks.