Knockout v3, with Chosen Multiselect - Tagging

Question

I have started to extend off of the chosen library by creating an on they fly tagging capability using knockout observables to hold the selected values, however i have run into a couple issues. Hoping someone can provide some help.

Observed issues:
Entering more than two tags removes any added items after the first entry and replaces it with last entered tag. Selecting options from the tag list works well, however entering a new tag forces the same behavior as previously mentioned.

Custom KO Binding:

ko.bindingHandlers.chosenTagging = {
    init: function (element, valueAccessor, allBindings) {
        $(element).chosen({ width: '100%', disable_no_results: true, enable_custom_content: true, placeholder_text_multiple: 'Enter Tag(s)' });

        var valuesObservable = allBindings.get('selectedOptions');
        var updateList = function () {
            $(element).trigger('chosen:updated');
        }

        if (valuesObservable && typeof (valuesObservable.subscribe) == 'function') {
            valuesObservable.subscribe(updateList);
        }
    },
    update: function (element, valueAccessor, allBindings) {
        $(element).trigger('chosen:updated');
    }
};

JSFiddle :
http://jsfiddle.net/S3H2A/5/

Note: If you provide any additions to the chosen JS in fiddle, please state the line numbers where the changes were made.

Similar post found here: Add values to a chosen multiselect

GôTô · Answer 1 · 2014-07-24T18:48:35.707

1

You have one:

$(element).trigger('chosen:updated');

And one

$(element).trigger('liszt:updated');

I think the last one was removed from chosen, it was the syntax from the previous version. (although this might not be the answer to your question)

Another problem is that the ko.bindingHandlers.chosenTagging.update function is called when observables in your binding change, but there are none (chosenTagging: { }).

As for your real problem, I think the selectedOptions binding does not work great without the options binding.
With the options binding it works fine: demo

If you want to keep the possibility to enter custom input with the enable_custom_content_mode a workaround must be found.

edited Jul 24 '14 at 18:48

answered Jul 24 '14 at 15:44

GôTô

7,974
3
32
43

I believe chosen:updated in the new event trigger for select behavior vs liszt:updated being an older way. I have updated my code above to use the more recent event. – Sneaky McSneakerson Jul 24 '14 at 15:59
I also did notice that update wasn't firing when the first entry is submitted. Any ideas on how to approach this first? – Sneaky McSneakerson Jul 24 '14 at 16:20
It seems there is a problem with the enable_custom_content_mode. If you add an `options` binding, [it works fine](http://jsfiddle.net/S3H2A/4/). I'll need to investigate more – GôTô Jul 24 '14 at 17:28
I don't think you can really use [`selectedOptions` binding](http://jsfiddle.net/S3H2A/4/) without `options` binding, we'll need a workaround if you really need this mode – GôTô Jul 24 '14 at 17:35
I previously had options in there however, it didn't provide much difference.. I will update the JSFiddle to incorporate that for now. – Sneaky McSneakerson Jul 24 '14 at 18:23

Knockout v3, with Chosen Multiselect - Tagging

1 Answers1