Maslosoft Binder Logo Maslosoft Binder Documentation
Knockout JS tracker and binding handlers with coffee and sugar

Select2 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

Select2 package is not bundled with this package

Change programatically to [yes, no, maybe]

Relevant code used in examples:

<div class="form-group">
	<select
		id="select2"
		data-bind="
			tags: binder.model.options.selected
		"
		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>