xoxco / jquery-tags-input Goto Github PK

Similar to resizing the entire tag box, we should resize the "fake" input so that the entire tag is visible as the user types.

When using the callbacks (onChange, onRemoveTag, onAddTag) the only thing passed to the user callback is a string naming the tag removed. The this object passed to the callback is/can be incorrect, often resulting in the previously used element or last in a stack.

Hi, with the commit 51d058c from @DevBrothers #37

Line id = $(this).attr('id', 'tags' + new Date().getTime()).attr('id');

, it make the this plugin not compatible to use with the other plugin.
With this patch, the ID of element changed, so, some validator such VanadiumJS or other plugin that use ID of element make cause the error.

Can you show me the example of "multiple instances" of this patch? I cannot find the issues related to multiple instances. I also cannot find the use case of it.

Thanks you.

Hi

I know you have defaultText and thats great but I thought it would be nice to add the actual placeholder text to the input filed.

IE: placeholder = "My default text"

I ran into some problems with backbone. The defaultText shows up but then when you use it once it goes away forever. Yikes. Placeholder text (although it works just a little differently) still works.

Hello, I try to set the size of the input fields with the attribute "data-default"

I test with : $(data.fake_input).css('width','150px');
But size is set at loading
Best regards

Hello,

I'm prototyping a page to make use of your plugin. So far so good except for one problem. Obviously the tags need to be serialized at some point. No problem with tags inputs that exist on page load, but if I create one dynamically I can't seem to get the tags out.

Here is the relevant code I run on document.ready:

$("form input[class^='tags']").each(function () { initializeTags(this); });

function initializeTags(el) {
console.log('init ' + $(el).attr('id'));
$(el).tagsInput({ width: '300', defaultText: 'Click to add a keyword' });
}

I have a button that creates a new tags input and calls initializeTags again. It displays properly and I can add and remove tags from it. But when I try to get the tags out for serialization there is nothing there.

Here is that code:

$('#test-save').click(function () {
$('#positive-keyword-groups input.tags.positive').each(function () {
console.log($(this).attr('id') + ' ' + $(this).val());
});
});

The vals are correct for tags inputs that existed on page load but blank for dynamically added tags inputs.

Thoughts? Bug? User error?

Thanks,
Jason Reynolds

I made a small change to use inputColor setting instead of hardcoded #000000 for font color used when adding a tag. Default setting is #000000 for backward compatibility. You can find it at https://github.com/rtekie/jQuery-Tags-Input.

Hi, we have a few which make use of tagsinput on our page. When there is a tag removed we fire a javascript function.

It seems that if there are multiple tagsinput inputs on the page, tags are only removed from the last input. The javascript function always seems to fire, but the tag remains in all but the final input.

Anyone else noticed this?

Is this issue known to someone?

It simply doesn't filter suggested results. It just offers what ever is in autocomplete_url (json)

What should i do to fix that?

Hi, i want to integrate jquerytag in my joomla component. It work, but i have some trouble with autocomplete.
i have the json response from a search.php file in this format : [{"name":"tag8"}]

when i make a search, autocomplete show me one

        defaultText:'+ TAGS',
        interactive:true,
        width:'600px'
    });

I'm using Backbone, so often I'm creating detached elements from my views, that get attached to the DOM in one big go at the end.

I had to rework my code to call $(...).tagsInput() only after attachment to the DOM.

In the latest plugin version at line 69 "f($(this), tagslist[i]);" should be "f($(this), tagslist[i-1]);" since i is the length of the array but array index starts at 0 not 1.
Thanks!

Comma after maxTags should not be added, since IE complaints about this.

@@ -192,17 +192,17 @@
autosize: true,
comfortZone: 20,
inputPadding: 6*2,

• maxTags: 0,
  

• maxTags: 0
  

  },options);

hello, i just installed jquery tags to my website and i am trying to run a function when the tag input field is focused then another when the tag input is blurred. im having difficulty with getting that to work properly for some reason.

if(event.keyCode == 8 || String.fromCharCode(event.which).match(/\w+|[áéíóúÁÉÍÓÚñÑ,/]+/)) {

should be:

if(event.keyCode == 8 || String.fromCharCode(event.which).match(/\w+|[áéíóúÁÉÍÓÚñÑ,\/]+/)) {

Hi guys!
What best approach for the control, to limit the number of tags allowed to input?
I'm thinking about maintain a count (data) var to each tagInput, and use addTag() and removeTag() to control the limit.
But maybe you can have a better way!
Thx!

I have been checking your nice tags input plugin which would suit nicely to one of my projects. But instead of just providing the URL where the script pulls the static JSON data, I would like to use it with the callback function. So for example when a user starts typing, it would request the results dynamically after a certain amount of keystrokes. I now that jQuery autocomplete has this already.

Hi all,

I have too many entried in my database

I am using the autocomplete option of jQuery-Tags-input but end up with a very long list. I basically fetch all my data from the database and send it via JSON. Working great, but can;t figure out how to select the results from user input...

Is there a way to retrieve the value input by the user? I don't see any POST values in the code.

Thanks,

For my app, it would be convenient if there was an API that provided the current tag list as an array of strings.

i'm eager to integrate jquery autocomplete ...

before using the tagsinput i have already use the jquery autocomplete on my simple input text...
this is my jquery script :

that code work nicely, but when i trying to integrate that into tags input, i cannot understand how it becomes no respond when i type 4 keyword hoping that there autocomplete pop-up that suggest my input... here my tagsinput integration script :

$(function() {

        $('#penulis').tagsInput({
        width:'auto', 
        height:'auto', 
        defaultText:'Tulis penulis',
        autocomplete_url: '<?php echo base_url()?>index.php/admin/penulis_auto',
        autocomplete:{selectFirst:true,width:'100px',autoFill:true}
        });
    });

by the way thanks for nice plugin i'm planning to use it on my later educational project... :)

On some of my forms the 'add a tag' text is hidden, as is any tag name text that is typed in. However, new tags are still created correctly with typed name (even though can't see what typing).

Seems to only occur when form is initially hidden, and then shown (e.g. in a popup).

jQuery Tags Input Plugin 1.3.3
jQuery 1.6.2

As per the title. I'm counting the number of tags added by the onAddTag and onRemoveTag functions but how can I stop the user from adding more tags if they reach the limit?

It is a great plugin for tags input. I am facing an issue on IE-7 (same issue on IE 9 with Document Mode=IE 7) - it seem like the plugin is not being loaded, I am facing following java-script error:

JavaScript error occurred!

Error description: Object doesn't support property or method 'tagsInput'

Any help would be highly appreciated. Thanks.

I can't for the life of me, figure out how to get the autocomplete to work.

I use the example code as provided and no ajax request is fired (checked with firebug).

Any help would be appreciated.

Code used:

$('#content form input.tag-interface').tagsInput({
    autocomplete_url: APP_PATH + '/tags.json',
});

Hi

I'm using a backbone application with tagsInput so none of my pages are refreshing, I'm just loading up elements in the same dom. I would like to somehow unbind the tagsInput plugin from my input field when I load a new view. So something like

$('input').tagsInput('unbind'); 

Is it currently possible to do this anyway?

Can't locate why this is happening, but the little "x" and the anchor tag to manage delete of tags does not show up. Any clues as to where this is set?

As onChange even the onAdd & onRemove should receive $(this).
Explanation:
I have many tags-input in the same window and I have to perform an ajax call (auto save tags) on remove.
The additional parameter is needed to find/select others elements around the input.

When I use the following html snippet, only the first input is rendered as a tag. The second one is not.
< body>
< input type="text" class="tags" id="test">
< input type="text" class="tags" id="test1">
< /body>

My Jquery selector is jQuery("input[class^='tags']").tagsInput();

When I use a css operation on the above selector instead,

eg jQuery("input[class^='tags']").css("border","3px solid red");

This selects both the inputs and highlights the red. This leads me to believe there is an issue with tagsInput function or the way I am setting up the tags

If you look at the demos on this page: http://xoxco.com/projects/code/tagsinput/

... you can see that, once you select a tag from the autocomplete list (or no tag at all), the "add a tag" text is no longer displayed.

When using autocomplete (with a json service as suggestions provider) I don't get the nice "add a tag" placeholder message.
Why is that?
Is there any way I can get both autocomplete and the default text message?

With a (jQuery.ui) autocomplete enabled taginput field:
User types in a new, non existing tag (autocomple returns empty list).
User clicks on other form input element (or directly the form submit button).
(So the user does't end with it ',' or selects something from the autocomplete list)

Result:
The 'new' tag is not send in the form POST.

This used to work, but commit 683637913c5d6c2c6b59e7f330174fba3d402b7f removed the 'blur' event handler in combination with autocomplete

jQuery-Tags-Input seems to break with jQuery 1.7.2 (it's fine on 1.7.1).

Specifically, clicking to add a tag raises the following error in the console:

Error: Syntax error, unrecognised expression: #[object Object]_addTag

And clicking to remove a tag raises the following:

Error: Syntax error, unrecognised expression: #[object Object]_tagsinput

When using tagsInput with the jQuery.ui.autocomplete widget, the autocomplete_url can be a reference to an array, an array of object, a url, or a function.

Calling it "autocomplete_url" is misleading since it does not have to be a url and I almost discounted using this solution. It's trivial, but I have changed it to "autocomplete_src" in my work.

Otherwise awesome work!

The BUG:
If I have multiple boxes with tags enabled, and I add to one of them, then try to delete an entry from another one, the 'id' is wrong, and it doesn't delete the entry.

The FIX:
I noticed that your older 1.2 version DID work, and so I used a few lines of it's source code:

It's around line 45, I used the old-skool html creation you had, instead of the fancy new one (in grey), which for some reason is messing up the click-bind.

            if (value !='' && skipTag != true) { 

replaced with old code:
$(''+value
+ '  x').insertBefore('#'+id+'_addTag');

<<< removed the new fancy code that doesn't work.
$('').addClass('tag').append(
$('').text(value).append('  '),
$('', {
href : '#',
title : 'Removing tag',
text : 'x'
}).click(function () {
console.log( '[click] removing tag (id:+'+id+'): '+escape(value) );
return $('#' + id).removeTag(escape(value));
})
).insertBefore('#' + id + '_addTag');
<<< end of removal
tagslist.push(value);

This issue may actually be a jQuery issue, but using simpler HTML generation, as was done in 1.2, it works properly.

I cannot get this to return true. I tried matching against tags added via addTag, as well as tags defined in value attribute of the input tag.

Is there something I might be missing?

The minified version is missing a semicolon at the end of the file (without this you will run into a "undefined is not a function" error when compressed along with other javascript files.

string split function supports regexp and it is now possible to set regexp as delimiter.

Problem is if you use regexp as delimiter that piece of code starting to throw error (event.which==event.data.delimiter.charCodeAt(0)) when you type in input field.

in file of jquery.tagsinput.js

Initially, I installed the minified version of Tags Input and repeatedly tried calling tagExist() to no avail. On a whim, I switched to the unminified version of the plugin and tagExist() worked as expected.

I'm not sure what the problem was/is, as I didn't get any errors using the minified version, but thought this problem odd enough to be worth mentioning.

Rather a feature request then an issue, but it would be cool if it was possible to automatically resize the container as soon as it would get a vertical scrollbar.

hello,

I need help cause Im spendig too much time on this issue.

im trying to use your tags-input plugin with the autocomplete plugin ( http://xoxco.com/x/tagsinput/jquery-autocomplete/jquery.autocomplete.js ) but I can only get data if I write it in plain text, with intro keyboard (not br nor /n).

I would like to get a Json call so i could save also the id of the tag Im going to show from database.

How could I do this? Im going crazzy trying to get this working on.

Regards,

Text is not parsed when somebody paste text that contains delimiter (for example "foo, bar, test").

This plugin requires that the target object which will contain the tags have an id. If the object does not have an id, then a syntax error occurs: "Uncaught Syntax error, unrecognized expression: #"

Hello! Thank you for the awesome plugin!

Is it possible to integrate the jquery UI autocomplete? If so, please give some insight. Thanks! :)

Hi there,

I noticed that hitting the backspace to delete a tag does not work on Internet Explorer (even on xoxco's demo page) - it works fine on other browsers - any idea what's going on? Is there a work-around??

Thanks, Aleks.

Seems as tagExist not working correctly when i push in tags with help of addTag.
I tested to print out the result of tagExists and i just get false.

     jQuery("#popularTags span").click(function() {
            var tmpTag = jQuery(this).text();
            if (!jQuery('#tags').tagExist(tmpTag)) { jQuery('#tags').addTag(tmpTag); }  
     });

The change that added min-height for autogrow broke height:auto or height:<100px
It now sets height and height-min, and will not set height-min to less than 100px.

When using AJAX to update input boxes, the tags do not update accordingly.

so a new feature that removes the old tags, checks the INPUT box and re-adds the tags would be a nice feature (right now I have to manually remove all the old tags, then re-add the new tags one by one)

$('#tag).updateTag();

Hello all,

It seems natural to me that I should be able to submit tags with an internal ID. For example, real names where there may be multiple real names for any given ID (or such). In any case, I currently have my JSON coming in like this:

{"id":2,"value":" Atkins"}

I want to submit "2" when "Atkins" is selected.

Any thoughts on how this would be possible?

By the way, it sort of works when I do the following:

{"value":2,"label":" Atkins"}

though when an item is selected (I have autocomplete as well), then the display becomes "2" again.

Hi,
Would it be possible to make the plugin work with jquery objects, and not just selectors?
This would make it possible to use it on an input we just created that does not have an id, like:
$(container).find('input[name="tags"]').tagsInput() ?
Great plug-in otherwise :)