Tagging support for Select2 with Knockout.js

Question

In attempting to integrate Knockout.js with Select2, I noticed that what seems to be the usual way of doing it does not seem to have tagging support.

There is a jsFiddle that illustrates the basic support, but it is not apparent how one would extend this to Select2's tagging support.

I have reduced this to a more concise jsFiddle example that one would expect would form the basis for a solution.

I would be grateful for thoughts and suggestions on how to go about obtaining tagging support for Select2 with Knockout.js.

Note: I am not wed to Select2, though I think it is brilliant. If however there is an alternative suggestion for tagging support that works well with Knockout.js, I would be quite interested in hearing about it. That being said, a solution to the problem with Select2 would be quite interesting, I think.

Answer 1

The tagging feature doesn't work with <select> elements as you noted. That's because it allows the user to add tags that aren't in the list. You can type anything in the field and press enter, and it's added to the value.

Here is a working example: http://jsfiddle.net/mbest/6XvqX/41/

Key changes:

1. The list of available items is passed directly to Select2 through a tags option.
2. The value binding is used instead of selectedOptions since the latter only works with <select> elements.
3. A computed is used to get the selected items as an array.

Answer 2

I have updated the fiddler with a newer version of knockout.js as I couldn´t get the example above to work. This one does the trick: http://jsfiddle.net/6XvqX/424/.

(no change to the code itself)

Anyhow, thanks to Michael for providing the solution. :)