it is necessary to trigger when user removes a tag by clicking on the

<a> <i class='icon-remove-sign icon-white'></i></a>

element, because pressedDelete only works when the backspace keyboard key is pressed

Hi Maxwells,

Just notice this excellent job on web. I would say I was stunned by your demo examples.

However, seems you've not updated this project for two months already. Will you continue its development, especially, considering the Twitter Bootstrap v3 has been announced.

Really looking forward to your news.

Regards,
Bryant

Reproduction Steps on demo page

1. add the following tag "abcdefgh &"
2. delete the tag above using the click to remove cross (NOT the backspace ability which appears to work)
3. delete one of the other tags and watch the previously deleted tag re-appear

The grunt-bower-install uses the main value(s) from the bower.json file. Since the lib folder doesn't exist each build produces a error.

"main": [
    "lib/bootstrap-tags.js",
    "css/bootstrap-tags.css"
],

The following change fixes this problem.

"main": [
    "dist/js/bootstrap-tags.js",
    "dist/css/bootstrap-tags.css"
],

Thanks!

Out of interest, why on the .tags-input do you set box-sizing to content-box ? In my project I am using your plugin (thanks!) but changed it to border-box so that the input was responsive (but still supported internal left padding to simulate tag spacing for the cursor position). I'd have thought this would be more in keeping with bootstraps responsive approach.

https://github.com/maxwells/bootstrap-tags

.tags(

should be

.tagsinput(

How can I have a list of tags which can only be removed?
I do not want the user to add any more tags, but only remove.

How can I custom split char? The default split char is ',' ,the question is how can I custom the split char such as . / | or use a whitespace as the split char?

https://github.com/maxwells/maxwells.github.io/blob/eb38ed6cbb055f82e699a365aabb613b9ed57e0f/bootstrap-tags.html
Chromium Version 54.0.2840.101 (64-bit) - Mac OS X 10.9.5

I'm trying to use your plugin for tags and it works well. In this very moment I'm facing this use case:

• I have a list of tags
• I add a tag
• I want to get the array of the values of all the tags after the insertion

I tried to use the callback whenAddingTag, but it's triggered before adding the new tag. So there's no way to get all the tags' values using whenAddingTag.
A hack like a timeout could be used, but I wouldn't like it.

So, what do you think about adding more events to be trigged, like:

beforeAddingTag()
afterAddingTag()
beforeDeletingTag()
afterDeletingTag()

for example, addTag() would become:

      this.addTag = function(tag) {
        var associatedContent;
        if ((_this.restrictTo === false || _this.restrictTo.indexOf(tag) !== -1) && _this.tagsArray.indexOf(tag) < 0 && tag.length > 0 && (_this.exclude === false || _this.exclude.indexOf(tag) === -1) && !_this.excludes(tag)) {
          _this.beforeAddingTag(tag);
          if (_this.displayPopovers) {
            associatedContent = _this.definePopover(tag);
            _this.popoverArray.push(associatedContent);
          }
          _this.tagsArray.push(tag);
          _this.afterAddingTag(tag);
          return _this.renderTags();
        }
      };

Hi,

There is a bug with suggestions if tags in suggestions start with an uppercase letter /!
For instance, if suggestions are ["Alpha", "bravo"], typing :

With option caseInsensitive: false
"a" will suggest "Alpha" -> problem as caseInsensitive is false
"A" WON'T suggest "Alpha" -> that's the problem
"b" will suggest "bravo"
"B" won't suggest "bravo"

With option caseInsensitive: true
"a" won't suggest "Alpha"
"A" WON'T suggest "Alpha" -> that's the problem
"b" will suggest "bravo"
"B" will suggest "bravo"

Also, caseInsentive:true works only if tags in suggestions are in lowercase.

This is a real problem if you are using a smartphone which as keyboard set to enter an uppercase letter first, suggestions will never appear. Ex : iPhone 5.

Is this a know bug ?

Thanks,

Danjor.

There is an issue with padding of the input field. If you try to change the padding via CSS, then the positioning of the input doesn't work properly and causes text to be underneath the tags.

Hi,

I was wondering if this library supports the ability to pass Ids to each tag as well as getting those passed Ids from the getTags function?

Estentially, what I want to do is pass the tags names and ids for the tags in the initialization. (e.g. $('#tags').tags({suggesstions: [ 'All', 'Accounting', 'Management' ], restrictTo: [ 'All', 'Accounting', 'Management' ], tagIds: [ '1', '2', '3' ] });)

And then would it be possible, using the getTags() function or another function (e.g. getTagIds()), to retrieve those ids as well as the tag names.

This would be very helpful if you could provide a solution for this to me. I would very much like to use this library, but I need it to support Ids.

Thanks!

~ Tyler

Hello,
We have just add Bootstrap-tags to twittstrap resources list
http://www.twittstrap.com/resources/details/bootstrap-tags
Under : Forms
Regards

How to maintain the listing of open suggestions and keep items that have been added in the suggestion list?

Necessary that the items added to continue appearing as it will add an icon "check" next to the tags that the user clicked.
Can someone help me please?

I'm trying to have my own promptText on tagbox initialization, but it's not working. I can only get it to work after a tag is input, and then removed. Upon tag initialization, the default promptText of "Enter tags.." is used, and my option is ignored. This is what I'm using.

function initTags(name) {
var tagbox = $(name).tags({
tagData:[],
tagSize:'sm',
suggestions:[],
promptText:'Enter a word or phrase and press Return',
caseInsensitive: true
});
}
How can I fix this? I've tried clearing my cache, and session, and reloading everything from scratch. No such luck. Thanks.

Hi, nice typeahead library but why doesn't the popup close after opening?

Is there an easy way to make this control not be case sensitive? I am trying to use it as a filter and I would rather the suggestion list pop up no matter what the case typed in is.

--nevermind, this was easy once I looked into the code

Under "Controlling Tags", there is the phrase "Some functions are chainable (returns a Tagger object), and can be used to move the data around outside of the plugin"

It would be really nice to see some sort of example of this in the documentation / example files as I'm trying to join this rather nice tagging plugin to database functionality (i.e. an ajax call to a database)

Thanks!

Is there a way to keep the popover content from going away immediately after mousing-out of the tag? Ideally, the popover content would only go away if another area of the bootstrap-tags UI is clicked, or something outside of the bootstrap-ui is clicked.

For example, if I have a link in the popover, I am currently unable to click that link because the popover disappears as soon as I mouseout of the tag and move into the popover.

Your repo's description, below its name on its GitHub repo homepage, says
"Boostrap-themed [sic] jquery tag interface".
It should instead say
"Bootstrap-themed jquery tag interface"
(note the "t").

When trying out the demo for Bootstrap 2, as explained in the README Implementation section, tags are duplicated and outside a very large input area.

Check here:
http://jsfiddle.net/jogaco/WvzmN/

como puedo obtener los valores que ingresaron?

 <div id="tax-list" class="tag-list"></div>

            $.getJSON('/api/tax/', function (result) {
                var arr = new Array();
                for (var k in result) {
                    arr.push(result[k].TaxCode);
                }
                $('#tax-list').tags({
                    tagData: [],
                    restrictTo: arr,
                    suggestions: arr
                });
            });

When I initialize the tags just like the code above, for the first time it initializes perfectly. When I select an item from the suggestions list, the page refreshes and I lose the previously selected data.

Hi,

I'm using bootstrap-tags with twitter bootstrap as a search bar and I'd like to know how to retreive tags and submit them?

For instance, if tags are "blue" and "green" :
A call should be done to "search" page like that :
website/search?tags=blue,green
or
website/search?tags1=blue&tag2=green

Thanks,

danjor.

Line 17 we can read
this.restrictTo = (options.restrictTo != null ? options.restrictTo.concat(this.suggestions) : false);
Which will generate a JavaScript error
Uncaught TypeError: Object #<error> has no method 'concat'
if we give a value to restrictTo.
The following fixes it:
this.restrictTo = (options.restrictTo != null ? options.restrictTo = this.suggestions : false);

Hope this helps.

EDIT: actually it's NOT a bug if you specify restrictTo: [] instead of a boolean. Maybe a check on the value's type?

You have a syntax error in your example code:

$(function()) {
$('#my-tag-list').tags({
tagData:["boilerplate", "tags"],
suggestions:["basic", "suggestions"],
excludeList:["not", "these", "words"],
})
}

should be:

$(function() {
$('#my-tag-list').tags({
tagData:["boilerplate", "tags"],
suggestions:["basic", "suggestions"],
excludeList:["not", "these", "words"],
})
});

Hey, this thing seems to work pretty well in the browsers I tested it on. I was wondering- how can increase the height of input text box? I supposed I will also have to increase the size of the tags. Is this possible?

Thank you,
Justin

How can we remove all tags from the input box?

For example, if I have

suggestions: ['Apple', 'Adam', 'Ace']

I will no see any of these until I type a into the input. Is there any way to get these all to show on focus?

Like after obtaining the suggestion data using an ajax request?

When the main (initial) tag div is inside of a container that is hidden on page load, this library does not work very well. Behaves strangely. I had to write some code to wait to initialize bootstrap-tags until the div they were in was displayed.

Could we have npm additional to bower?
Cheers,
Jonas

Is it possible to wrap the tag in a anchor or pass it a url? I've been looking through the docs but I haven't gotten to the source yet. Would you open to pull requests with the ability?

Hi. Is it possible to use the plugin with autocomplete made with ajax? Can someone provide a sample code?
Regards.

I need to load my "tagData" source from a javascript function. How it is possible ?
I would like to avoid calling to much addTag function

Tx for your help

It would be great if there would be a way through which I could set the maximum number of tags.

Hi

First of all. Great job! It's an amazing plugin. Works really well, but I had an issue with the readonly tags, because of the absolute position of the css. If I have content below the tags, it overlaps over them.
The solution is to change the position: absolute for the .tags class in the css.

Buuut, if you change the tags to readonly = false, the input field appears below the tags, which is not the desired behaviour. (changing to position: absolute for this works perfect).

Then, the solution, could be using position:relative for the readonly tags, and position:absolute for the non readonly.
I solved it when rendering the readonly div, adding to the .tags div another class called readonly, and giving it in the css the position: relative.

I don't know if it's the best solution, but it works for me.

Greetings!

nevermind, wrong page, sorry

Add support for Bower and add version tags can really help using this great package.

A function to return the array of the tags would be very useful.

Something like:

this.getValues = function() {

// get all tags values
     var values = [];

     $('#tags-labels').find('.tag.label > span').each(function(index) {
         values.push($(this).html());
     });

    return $values;
}

The input box through which the tags are submitted contains the default placeholder as "Enter tags", it would be great if there could be way through which one can change this placeholder.
Many thanks for this plugin.

I was thinking for beforeAddingTag, beforeDeletingTag methods, if return false, we can avoid to add/delete tag. If return true, then can go ahead.

Not sure if this is the right place for this question. Close this if it isn't. I have the plugin all set up and working. What I would like to have is either one of these things (prefferably number 1):

1. Rather than have a tag input, I would like a drop down list of all my available tags (I am restricting input). When they click one, it adds the tag.
2. Using the input rather than drop down list, when the input receives focus, show the whole list of suggestions.

Hi and thanks for your speed,

Since v1.1.3, there is a bug, after clicking on a suggested tag, the suggestion dialog is still opened with nothing inside. Instead, the suggestion dialog should be hidden after selecting a tag.

While selecting a tag :

After clicking :

In addition, using either css of v1.0.2 or v1.0.3 does not change anything to the issue.

Thanks for considering this issue,

Danjor.

It would be nice to have something like promptText for the ReadOnly mode. For example, if there are no tags I would like to provide some custom text like, "None yet" (for example).

This should be different from the PromptText, since the default messaging will be different if a user can add tags vs just being able to see them.

I am trying to make a responsive switch between readonly and not readonly, from not readonly to readonly is fine, but after I want to edit again new tags are not added, nor old tags deleted, see:
http://stackoverflow.com/questions/28981014/making-bootstrap-tags-responsive-jquery-events-lost

I have read the doc serverial times and do not find a way to do it.

The input box through which the tags are submitted contains the default placeholder as "Enter tags", it would be great if there could be way through which one can change this placeholder.
Many thanks for this plugin.

Hello,
If you use https, the demo page is not working. It uses a secure protocol (https) and all the include files are in non-secure protocol (http). Modern browsers does not include unsecure files on secure main file.

Solution 1: use protocol-relative urls:
instead of

http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic

use

//fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic

Solution 2: use secure protocol
instead of

http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic

use

https://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic

Regards