Select2 Styled Tags

Select2 is a library enchancing select element. This binding handler will demonstrate tags option. This binding handler also contains hacks required for tags to not pop-up empty results.

This binding handler converts select2 to tags selector.

Live example of Twitter Bootstrap styled tags

Select2 package is not bundled with this package

Relevant code used in examples:

<div class="form-group">
	<select
		id="select2"
		data-bind="
			tags: {­
			    'data': binder.model.options.selected,
			    'tagCss': 'btn btn-default btn-tag',
			    'inputCss': 'form-control tag-input',
			    'placeholder': 'Select tag...'
			­}
		"
		class="form-control">
	</select>
</div>
<div data-bind="text: binder.model.options.selected"></div>
<a id="changeIt" href="#">Change programatically to [yes, no, maybe]</a>
<script>
	window.onload = (function () {­

		binder.model.options = new Maslosoft.Koe.Options();
		binder.model.options.selected = ['noisy', 'loud'];

		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));
		
	­});
</script>