JSFiddle - React, Tailwind, and code Playground

by patelsan

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">
    <div id="one" class="tag-list"><div class="tags"></div></div><br />
    <div id="two" class="tag-list" style="width:350px;"><div class="tag-data">tag5,tag6,tag7,tag8</div><div class="tags"></div></div><br />
    
    <input type="button" value="Our Lookup" onclick="addCompany()" />
</div>

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({});

addCompany = function(){ 
  $('#one').tags().addTag("JP Morgan & Company");
}