JSFiddle - React, Tailwind, and code Playground

by ccakn5870

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<div class="row">
    <div class="col-lg-12">
        <dl class="dl-horizontal">
            <dt>Action Items:</dt>
            <dd>
                <div id="action-items">
                    <input type="checkbox" name="item1" value="item1"> Action Item 1<br>
                    <form class="form-inline">
                        <div class="tokenfield form-group">
                            <input type="text" class="typeahead form-control" id="tokenfield-typeahead" />
                        </div>
                        <button type="button" class="btn btn-default">Save</button>
                    </form>
                    <input type="checkbox" name="item2" value="item2"> Action Item 2<br>
                        <form class="form-inline">
                        <div class="tokenfield form-group">
                            <input type="text" class="typeahead form-control" id="tokenfield-typeahead2" />
                        </div>
                        <button type="button" class="btn btn-default">Save</button>
                    </form>
                    <input type="checkbox" name="item3" value="item3"> Action Item 3
                </div>
            </dd>
            <hr />
        </dl>
    </div>
</div>

CSS

.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999
}

.tt-menu { /* used to be tt-dropdown-menu in older versions */
    width: 422px;
    margin-top: 4px;
    padding: 4px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    line-height: 24px;
}

.tt-suggestion.tt-cursor, .tt-suggestion:hover {
    color: #fff;
    background-color: #0097cf;
}

.tt-suggestion p {
    margin: 0;
}

JavaScript

$(document).ready(function () {
            var engine = new Bloodhound({
            local: [
                { id: 1, name: 'red' },
                { id: 2, name: 'orange' },
                { id: 3, name: 'yellow' },
                { id: 4, name: 'green' },
                { id: 5, name: 'blue' },
                { id: 6, name: 'indigo' },
                { id: 7, name: 'violet' },
                { id: 8, name: 'black' },
                { id: 9, name: 'white' },
                { id: 10, name: 'brown' },
                { id: 11, name: 'pink' }
            ],
                datumTokenizer: function (d) {
                    return Bloodhound.tokenizers.whitespace(d.name);
                },
                queryTokenizer: Bloodhound.tokenizers.whitespace
            });

            engine.initialize();

            $('#tokenfield-typeahead').tokenfield({
                typeahead: [null, {
                    source: engine.ttAdapter(),
                    displayKey: 'name',
                    displayValue: 'id'
                }]
            });                        
            
            var engine = new Bloodhound({
  					local: [
                { value: 'red' },
                { value: 'orange' },
                { value: 'yellow' },
                { value: 'green' },
                { value: 'blue' },
                { value: 'indigo' },
                { value: 'violet' },
                { value: 'black' },
                { value: 'white' },
                { value: 'brown' },
                { value: 'pink' }
            ],
  					datumTokenizer: function(d) {
    					return Bloodhound.tokenizers.whitespace(d.value);
  					},
  					queryTokenizer: Bloodhound.tokenizers.whitespace
					});

					engine.initialize();

					$('#tokenfield-typeahead2').tokenfield({
  					typeahead: [null, { source: engine.ttAdapter(),
          	displayKey: 'value',
          	displayValue: 'value'
          	}]
					});
});