Select2 Tagging Example

Using Select2 v 4.0.0

by alanng

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<select id="tags" multiple="multiple">
    <option value="Kerry" selected="selected">Kerry</option>
    <option value="Cork" selected="selected">Cork</option>
</select>

CSS

#tags {
    width:100%
}

JavaScript

$('#tags').select2({
	tags: true,
    data: ["Clare","Cork","South Dublin"],
    tokenSeparators: [','], 
    placeholder: "Add your tags here",
    /* the next 2 lines make sure the user can click away after typing and not lose the new tag */
    selectOnClose: true, 
    closeOnSelect: false
});