I am wondering whether it's possible to add new values on the fly to a chosen.js multiselect (similar to how tagging works).

I've seen in another SO post a user saying this is possible. He links to an example and a fork on github, but I've had some difficulties implementing those.

The source code is written in CoffeeScript. I've tried piling it (using an online piler) to regular JavaScript, copy pasted the code into a blank test project but I got errors. After that, I've loaded The AbstractChosen and SelectParser as well (piled them to js) and didn't get errors, but the 'add items on the fly' functionality is not there (although i initialized the chosen described in the aforementioned link).

Has anybody worked with this fork? If yes, could you please share your experiences with it?

I am wondering whether it's possible to add new values on the fly to a chosen.js multiselect (similar to how tagging works).

I've seen in another SO post a user saying this is possible. He links to an example and a fork on github, but I've had some difficulties implementing those.

The source code is written in CoffeeScript. I've tried piling it (using an online piler) to regular JavaScript, copy pasted the code into a blank test project but I got errors. After that, I've loaded The AbstractChosen and SelectParser as well (piled them to js) and didn't get errors, but the 'add items on the fly' functionality is not there (although i initialized the chosen described in the aforementioned link).

Has anybody worked with this fork? If yes, could you please share your experiences with it?

• javascript
• jquery-chosen

3 Answers 3

The problem you have is because you haven't follow the steps in the documentation:

If you download the source, install the correct packages and run the build mands you end with a chosen.jquery.js, chosen.proto.js and chosen.css.

So the following steps should do it for you:

1. Download: https://github./koenpunt/chosen/archive/option_adding.zip
2. Install packages: npm install && gem install bundler && bundle install
3. Run build: grunt build (note, for this you'll need the grunt cli)

Edit

Or for your convenience, download a piled release.

the documentation mentions this option:

Updating Chosen Dynamically

If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.

with this.

$("#form_field").trigger("chosen:updated");

This can be bined with

// Add field
$("#form_field").append("<option>Utopia</option>");

$("#form_field").trigger("chosen:updated");

Adding this together to an example can be found at the jsfiddle: http://jsfiddle/E5X9x/

The solution is here

$('select').chosen({plugins: ['option-adding']});

or

$(function() {
  $(".chzn-select").chosen({
    create_option: true,
    // persistent_create_option decides if you can add any term, even if part
    // of the term is also found, or only unique, not overlapping terms
    persistent_create_option: true,
    // with the skip_no_results option you can disable the 'No results match..' 
    // message, which is somewhat redundant when option adding is enabled
    skip_no_results: true
  });
});