Add values to a chosen multiselect

Question

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 compiling it (using an online compiler) 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 (compiled 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?

Koen. · Accepted Answer · 2014-10-22T20:34:02.220

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 commands you end with a chosen.jquery.js, chosen.proto.js and chosen.css.

So the following steps should do it for you:

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

Edit

Or for your convenience, download a compiled release.

edited Oct 22 '14 at 20:34

answered Aug 13 '13 at 07:49

Koen.

25,449
7
83
78

Thanks for the clarifications on grunt (the note on the step 3). I've tried using npm install -g grunt, but that didn't come with the CLI (now i see grunt-cli is the right way). Also, thanks for the zip, seems to me it's a lot easier this way since (I believe) the coffeescript layer adds complexity for users that don't have experience with it or are more used to vanilla javascript. Thanks a lot! – Zubzob Aug 13 '13 at 08:33
@Koen. i assume you're the author of that fork, I sent you a pull request https://github.com/koenpunt/chosen/pull/49 to update the readme.md fine since your jumpshare links are out of date. – Chris Marisic Oct 22 '14 at 20:28

Arend · Answer 2 · 2013-08-13T05:49:31.540

1

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 combined 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.net/E5X9x/

edited Aug 13 '13 at 05:49

answered Aug 13 '13 at 05:42

Arend

3,741
2
27
37

Ah, I see. I was expecting a functionality similar to this: http://xoxco.com/projects/code/tagsinput/ . Is this impossible to achieve through chosen? I mean, I know I could somehow fetch the val() of the chosen input, do a check, and eventually append it as an option after the user hits tab or enter, but I'm trying to see whether this possibility is built in (in the fork I mentioned). Thanks a lot for your input though! – Zubzob Aug 13 '13 at 05:56
1

The fork @Zubzob is talking about (my fork) has the ability to add options using Chosen's interface. Documentation for this feature you can find here: https://github.com/harvesthq/chosen/pull/166 – Koen. Aug 13 '13 at 07:54

score 0 · Answer 3 · edited Nov 15 '17 at 10:44

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
  });
});

Add values to a chosen multiselect

3 Answers3

Linked