jbergknoff/gist:6311822

## gistfile1.js
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.1/select2.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/jbergknoff/6302631/raw/abe64a6ecf5f31847b79226c772a4c77b51da1cd/gistfile1.js"></script>
<script type="text/javascript" src="https://rawgithub.com/bobwold/betterObservableArray/master/src/betterObservableArray.js"></script>
<link href="https://rawgithub.com/ivaynberg/select2/master/select2.css" rel="stylesheet">
<script type="text/javascript">
$(Loaded);

function Loaded()
{
	ko.applyBindings(new MyBinding());
}

function MyBinding()
{
	var Self = this;
	Self.Tags = ko.betterObservableArray();

	Self.TagPool = "Lorem ipsum dolor sit amet consectetur adipiscing elit. Nunc luctus quis quam et dignissim. Maecenas ultrices augue nec nunc tempus convallis. Nulla pharetra urna id rutrum viverra urna magna volutpat nisl sit amet".split(" ");
	Self.SpecialTagPool = "Lorem ipsum dolor".split(" ");


	Self.SpecialTags = new coolness(Self, Self.Tags);
	Self.SpecialTags.FilterPool = Self.SpecialTagPool;

	function coolness(Owner, FullTagListAccessor)
	{
		this.FilterPool = [];

		this.Observable = ko.computed
		(
			{
			"read":
				function()
				{
					var Pool = {};
					this.FilterPool.forEach(function(T) { Pool[T] = true; });
					return FullTagListAccessor().filter(function(T) { return T in Pool; });
				},

			"write":
				function(WrittenList)
				{
					FullTagListAccessor(); // indirectly force a read on this computed observable.
					if (typeof this.Known === "undefined") this.Known = [];
					if (this.Known.length == WrittenList.length)
					{
						this.Known = this.Observable();
						return;
					}

					var Bigger, Smaller, Mode;
					if (this.Known.length > WrittenList.length)
					{
						Bigger = this.Known;
						Smaller = WrittenList;
						Mode = "Remove";
					}
					else if (this.Known.length < WrittenList.length)
					{
						Bigger = WrittenList;
						Smaller = this.Known;
						Mode = "Add";
					}

					var BiggerPool = {};
					Bigger.forEach(function(T) { BiggerPool[T] = true; });
					Smaller.forEach(function(T) { delete BiggerPool[T]; });

					for (var T in BiggerPool)
					{
						if (Mode === "Add")
						{
							this.Known.push(null);
							FullTagListAccessor.push(T);
						}
						else if (Mode === "Remove")
						{
							this.Known = this.Known.slice(1);
							FullTagListAccessor.remove(T);
						}
					}
					Owner.SetTagList(FullTagListAccessor());
				}
			},
			this
		);
	}
}

ko.bindingHandlers.LinkedArray =
{
	"init":
		function(Element, LinkedArrayAccessor, Dummy, Context)
		{
			var LinkedArray = LinkedArrayAccessor();

			$(Element).on
			(
				"change",
				function(E)
				{
					if (E.added) LinkedArray.push(E.added.text);
					else if (E.removed) LinkedArray.remove(E.removed.text);
				}
			);

			Context.SetTagList = function(Tags) { $(Element).select2("data", Tags.map(function(T) { return { "id": T, "text": T }; })); }
		}
};
</script>
</head>

<body>
all tags:
<br>
<input type="text" data-bind="select2: { tags: TagPool, width: '500px' }, LinkedArray: Tags">
<br><br>
special tags:
<br>
<div data-bind="text: SpecialTags.Observable"></div>
<br>
<select multiple data-bind="select2: { placeholder: 'select some stuff', width: '500px' }, selectedOptions: SpecialTags.Observable">
<option></option>
<!--ko foreach: SpecialTagPool-->
<option data-bind="value: $data, text: $data"></option>
<!--/ko-->
</select>
</body>
</html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.1/select2.min.js"></script>
	<script type="text/javascript" src="https://rawgithub.com/jbergknoff/6302631/raw/abe64a6ecf5f31847b79226c772a4c77b51da1cd/gistfile1.js"></script>
	<script type="text/javascript" src="https://rawgithub.com/bobwold/betterObservableArray/master/src/betterObservableArray.js"></script>
	<link href="https://rawgithub.com/ivaynberg/select2/master/select2.css" rel="stylesheet">
	<script type="text/javascript">
	$(Loaded);

	function Loaded()
	{
	ko.applyBindings(new MyBinding());
	}

	function MyBinding()
	{
	var Self = this;
	Self.Tags = ko.betterObservableArray();

	Self.TagPool = "Lorem ipsum dolor sit amet consectetur adipiscing elit. Nunc luctus quis quam et dignissim. Maecenas ultrices augue nec nunc tempus convallis. Nulla pharetra urna id rutrum viverra urna magna volutpat nisl sit amet".split(" ");
	Self.SpecialTagPool = "Lorem ipsum dolor".split(" ");


	Self.SpecialTags = new coolness(Self, Self.Tags);
	Self.SpecialTags.FilterPool = Self.SpecialTagPool;

	function coolness(Owner, FullTagListAccessor)
	{
	this.FilterPool = [];

	this.Observable = ko.computed
	(
	{
	"read":
	function()
	{
	var Pool = {};
	this.FilterPool.forEach(function(T) { Pool[T] = true; });
	return FullTagListAccessor().filter(function(T) { return T in Pool; });
	},

	"write":
	function(WrittenList)
	{
	FullTagListAccessor(); // indirectly force a read on this computed observable.
	if (typeof this.Known === "undefined") this.Known = [];
	if (this.Known.length == WrittenList.length)
	{
	this.Known = this.Observable();
	return;
	}

	var Bigger, Smaller, Mode;
	if (this.Known.length > WrittenList.length)
	{
	Bigger = this.Known;
	Smaller = WrittenList;
	Mode = "Remove";
	}
	else if (this.Known.length < WrittenList.length)
	{
	Bigger = WrittenList;
	Smaller = this.Known;
	Mode = "Add";
	}

	var BiggerPool = {};
	Bigger.forEach(function(T) { BiggerPool[T] = true; });
	Smaller.forEach(function(T) { delete BiggerPool[T]; });

	for (var T in BiggerPool)
	{
	if (Mode === "Add")
	{
	this.Known.push(null);
	FullTagListAccessor.push(T);
	}
	else if (Mode === "Remove")
	{
	this.Known = this.Known.slice(1);
	FullTagListAccessor.remove(T);
	}
	}
	Owner.SetTagList(FullTagListAccessor());
	}
	},
	this
	);
	}
	}

	ko.bindingHandlers.LinkedArray =
	{
	"init":
	function(Element, LinkedArrayAccessor, Dummy, Context)
	{
	var LinkedArray = LinkedArrayAccessor();

	$(Element).on
	(
	"change",
	function(E)
	{
	if (E.added) LinkedArray.push(E.added.text);
	else if (E.removed) LinkedArray.remove(E.removed.text);
	}
	);

	Context.SetTagList = function(Tags) { $(Element).select2("data", Tags.map(function(T) { return { "id": T, "text": T }; })); }
	}
	};
	</script>
	</head>

	<body>
	all tags:
	<br>
	<input type="text" data-bind="select2: { tags: TagPool, width: '500px' }, LinkedArray: Tags">
	<br><br>
	special tags:
	<br>
	<div data-bind="text: SpecialTags.Observable"></div>
	<br>
	<select multiple data-bind="select2: { placeholder: 'select some stuff', width: '500px' }, selectedOptions: SpecialTags.Observable">
	<option></option>
	<!--ko foreach: SpecialTagPool-->
	<option data-bind="value: $data, text: $data"></option>
	<!--/ko-->
	</select>
	</body>
	</html>