maxwells / bootstrap-tags Goto Github PK
View Code? Open in Web Editor NEWBootstrap-themed jquery tag interface
License: MIT License
Bootstrap-themed jquery tag interface
License: MIT License
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
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.
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/
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.
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?
Like after obtaining the suggestion data using an ajax request?
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.
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?
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
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):
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.
como puedo obtener los valores que ingresaron?
I was thinking for beforeAddingTag, beforeDeletingTag methods, if return false, we can avoid to add/delete tag. If return true, then can go ahead.
I'm trying to use your plugin for tags and it works well. In this very moment I'm facing this use case:
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();
}
};
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?
Hello,
We have just add Bootstrap-tags to twittstrap resources list
http://www.twittstrap.com/resources/details/bootstrap-tags
Under : Forms
Regards
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?
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").
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.
<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.
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?
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!
Hi, nice typeahead library but why doesn't the popup close after opening?
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.
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.
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
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!
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
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
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
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;
}
nevermind, wrong page, sorry
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.
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.
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
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.
It would be great if there would be a way through which I could set the maximum number of tags.
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.
Reproduction Steps on demo page
Could we have npm additional to bower?
Cheers,
Jonas
How can we remove all tags from the input box?
I have read the doc serverial times and do not find a way to do it.
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
Hi. Is it possible to use the plugin with autocomplete made with ajax? Can someone provide a sample code?
Regards.
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
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.
Add support for Bower and add version tags can really help using this great package.
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"],
})
});
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
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.