Base Bootstrap-Tagsinput

by 20yco

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
<link rel="stylesheet" href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/assets/app.css">
<input type="text" value="" class="tags" />
<div class="items"></div>

CSS

.items span {
    display: inline-block;
    margin: 5px;
    padding: 5px;
    border: 1px solid #CCC;
}

JavaScript

$(document).ready(function() {
	$('.tags').tagsinput({
    	allowDuplicates: true
    });
    
    $('.tags').on('itemAdded', function(item, tag) {
        $('.items').html('');
		var tags = $('.tags').tagsinput('items');
        $.each(tags, function(index, tag) {
        	$('.items').append('<span>' + tag + '</span>');
        });
    });
});

$('input').keyup(function (e) {
    console.log("keyup");
});