JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<script src="https://raw.github.com/maxwells/bootstrap-tags/master/lib/bootstrap-tags.js"></script>
<link rel="stylesheet" href="https://raw.github.com/maxwells/bootstrap-tags/master/css/bootstrap-tags.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<div class="container">
  <h3>Bootstrap Tags Demo</h3>
    Note: please excuse the odd sizing of the text boxes. For whatever reason, jsFiddle isn't cooporating.<br />
    <br />
    - unfiltered<br />
    - suggestions: "here", "are", "some", "suggestions".<br />
    - excludes: "excuse", "my", "vulgarity" and anything with an exclamation point.<br />
    - popovers enabled (should you want to programmatically define what the popover content is for a given tag, the definePopover(tag) method can be overwritten)

    <div id="one" class="tag-list"><div class="tags"></div></div><br />
      
- suggested terms<br />
- a couple restricted terms ("restrict", "to", "these").
<br />
- By default, all suggested terms are allowed, so if a user deletes one, it can be repopulated.<br />
- This tag-list substitutes in a custom function (whenAddingTag) that logs the tag to the console if it is successfully added -- a more practical use would be to fetch popover content for the tag that was added with setPopover(tag, content) in an ajax callback.<br />
- Tags are defined from .tag-data div.<br />
- This example overrides default display class (btn-info) with .btn-warning to change color
      
    <div id="two" class="tag-list" style="width:350px;"><div class="tag-data">tag5,tag6,tag7,tag8</div><div class="tags"></div></div><br />

      Here are some other colors (pulled right from bootstrap styling, so if you change the bootstrap colors, these will all change accordingly)
    <div id="three" class="tag-list"><div class="tags"></div></div>
      <div id="four"...

CSS

/* bootstrap-tags styles */

.tag-list {
    width: 280px;
    height: 26px;
    left:2px;
    top:2px;
    position:relative;
}
.tag-data {
    display:none;
}
.tags-input {
    width:100%;
    height:100% !important; 
    margin:0;
    padding-bottom:0 !important;
    font-size:12px !important;
}
.tags {
    width:inherit;
    height:0;
    position:absolute;
    padding:0;
    margin:0;
}
.tag {
    padding: 1px 3px;
    margin:1px;
    float:left;
}
.tag a {
    color: #bbb;
    cursor:pointer;
    opacity: .5;
}
ul.tags-suggestion-list {
    width:100%;
    height:auto;
    list-style:none;
    margin:0;
    position:absolute;
    z-index:2;
    max-height:160px;
    overflow: scroll;
}
li.tags-suggestion {
    padding:3px 20px;
    height:auto;
}
li.tags-suggestion-highlighted {
    color: white;
    text-decoration: none;
    background-color: #0081C2;
    background-image: -moz-linear-gradient(top, #08C, #0077B3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08C), to(#0077B3));
    background-image: -webkit-linear-gradient(top, #08C, #0077B3);
    background-image: -o-linear-gradient(top, #08C, #0077B3);
    background-image: linear-gradient(to bottom, #08C, #0077B3);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

JavaScript

pressedUp = function(e) { console.log('pressed up'); };
whenAddingTag = function (tag) {
    console.log(tag);
    // maybe fetch some content for the tag popover (can be HTML)
};
excludes = function (tag) {
    // return false if this tagger does *not* exclude
    // -> returns true if tagger should exclude this tag
    // --> this will exclude anything with !
    return (tag.indexOf("!") != -1);
}
$('#one').tags( {
    suggestions : ["here", "are", "some", "suggestions"],
    popoverData : ["What a wonderful day", "to make some stuff", "up so that I", "can show it works"],
    tagData: ["tag a", "tag b", "tag c", "tag d"],
    excludeList : ["excuse", "my", "vulgarity"],
    excludes : excludes
} );
$('#two').tags( {
    suggestions : ["there", "were", "some", "suggested", "terms", "super", "secret", "stuff"],
    restrictTo : ["restrict", "to", "these"],
    whenAddingTag : whenAddingTag,
    pressedUp : pressedUp,
    tagClass : 'btn-warning' } );
$('#three').tags( {
    tagData  : ["alphabet", "soup", "bouncy", "castle"],
    tagClass : 'btn-success'
});
$('#four').tags( {
    tagData  : ["alphabet", "soup", "bouncy", "castle"],
    tagClass : 'btn-danger disabled'
});
$('#five').tags( {
    promptText : "Custom prompt..."
});