allow new values with chosen.js multiple select

jquery chosen multiple select example
jquery chosen remove selected option
jquery chosen select option dynamically
chosen disable option
chosen:updated
chosen:hiding_dropdown
chosen placeholder
chosen-select not working

I'm using the chosen.js plugin http://harvesthq.github.com/chosen/ with jQuery to allow the user to select multiple options from a select. However, I now want to be able to let them create values that aren't already present - any idea how to go about this?

EDIT: something similar to SO's own tag selection/creation bar would be close to what I'm after

Preferably without changing or editing the plugin, but will do if required.

The code: HTML:

<p>Select something</p>
<select name="theSelect[]" multiple="multiple">
    <option value="First Option">First Option</option>
    <option value="Second Option">Second Option</option>
</select>

Javascript:

$(function(){
    $('select').chosen();
});

So if a user were to type in "Third Option", i'd like to add that to the list and have it selected. The value and display name are / will be the same so that's not a concern

According to the documentation you can try doing something like this:

$('select').append('<option>test</option>');
$('select').trigger('liszt:updated');

As Tony stated in the comments below:

"Starting with version 1.0 which the trigger is now "chosen:updated". See harvesthq.github.io/chosen/#change-update-events"

Chosen, If no data-placeholder value is present, it will default to "Select an Option" or "​Select Some Options" depending on whether the select is single or multiple. Chosen is a jQuery Plugin, which gives some beautifully looking multiple selects in your form. The select can have some options populated, and the user can select one or multiple of them. Recently, while using this plugin, I wanted to allow the user to add his own values to the list dynamically.

I stumbled upon this looking for the same ideas. Seems like its a pretty popular feature request, and a couple of forks have implemented it. Looks like it'll be merged into the master branch soon enough.

+1 for this particular pull which worked a charm: https://github.com/harvesthq/chosen/pull/166

You can view Koenpunt's fork here: https://github.com/koenpunt/chosen

Adding new values to chosen plugin – Boundless Journey, Chosen has a number of options and attributes that allow you to have full text to be displayed as a placeholder when no options are selected for a multiple select. value="1">Option 1</option> <option value="2" selected>Option 2</​option>  Defaults to "Select an Option" for single selects or "Select Some Options" for multiple selects. Note:This attribute overrides anything set in the placeholder_text_multiple or placeholder_text_single options. multiple: The attribute multiple on your select box dictates whether Chosen will render a multiple or single select. selected, disabled

Here's a simple way that I did it:

$(".search-field").find("input").live( "keydown", function (evt) {
    var stroke;
    stroke = (_ref = evt.which) != null ? _ref : evt.keyCode;
    if (stroke == 9) { // 9 = tab key
        $('#tags').append('<option value="' + $(this).val() + '" selected="selected">' + $(this).val() + '</option>');
        $('#tags').trigger('chosen:updated');
    }
});

How to programmatically set the value? · Issue #605 · harvesthq , Recently, while using this plugin, I wanted to allow the user to add his options populated, and the user can select one or multiple of them. Allow Deselect on Single Selects. When a single select box isn't a required field, you can set allow_single_deselect: true and Chosen will add a UI element for option deselection. This will only work if the first option has blank text.

I was just trying to solve the same problem. I wound up modifying the source code a bit. Here's the new keyup_checker function. Take a look at case 13:

AbstractChosen.prototype.keyup_checker = function(evt) {
  var stroke, _ref;
  stroke = (_ref = evt.which) != null ? _ref : evt.keyCode;
  this.search_field_scale();
  switch (stroke) {
    case 8:
      if (this.is_multiple && this.backstroke_length < 1 && this.choices > 0) {
        return this.keydown_backstroke();
      } else if (!this.pending_backstroke) {
        this.result_clear_highlight();
        return this.results_search();
      }
      break;
    case 13:
      evt.preventDefault();
      if (this.results_showing) {
        if (!this.is_multiple || this.result_highlight) {
          return this.result_select(evt);
        }  

        $(this.form_field).append('<option>' + $(evt.target).val() + '</option>');
        $(this.form_field).trigger('liszt:updated');
        this.result_highlight = this.search_results.find('li.active-result').last();
        return this.result_select(evt);
      } 
      break;
    case 27:
      if (this.results_showing) this.results_hide();
      return true;
    case 9:
    case 38:
    case 40:
    case 16:
    case 91:
    case 17:
      break;
    default:
      return this.results_search();
  }
};

Chosen does not allow an option to be selected via Javascipt · Issue , If I don't use chosen then this method works fine on an ordinary select dropdown. E.g. var value = $("#chzn-select").val(); // Gets the value ok. var  Chosen automatically sets the default field text ("Choose a country") by reading the select element's data-placeholder value. If no data-placeholder value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple.

I know this not the answer, but, an alternate solution.

I was searching for the on-the-fly adding part and found that http://ivaynberg.github.com/select2/#tags provides the same thing as chosen + other stuffs like "Tagging".

Make user friendly select element with Chosen - jQuery, Chosen does not allow an option to be selected via Javascipt #729 (the second select box shows 'New York' as selected -- even with Chosen turned on). I am trying to set the selected value via some javascript and have not been able to _RegioniEsiti" multiple="multiple" name="SoasEsitiLavori[@i]. jQuery(document).ready(function(){ jQuery(".chosen").chosen(); }); The plugin detects the multiple designation and creates a Facebook-style display, otherwise creates a standard-looking SELECT element with search capabilities. Chosen also responds to keyboard commands for selection.

jQuery Select Box Components, It can handle both single and multi-select options. Add a search box to filter the list of options. There are various options available that allow us  I am using multiple chosen select and from the controller when I try to open my form in the edit I am not getting value populated in the drop-down field. So if I have selected 3 drop down item then whenever I will open my form that 3 items must be present in the drop down field with ability to add or remove items from the drop down list.

jQuery Chosen Plugin, This means that new features are being added, whilst others are Select2 and Chosen change the way simple and multiple select <select class="​progControlSelect2" multiple="true"> <option value="js">JavaScript</option> <​option Templating allows us to customize the look of components displayed  Add, select, or clear items. Creating new options in the dropdown. New options can be added to a Select2 control programmatically by creating a new Javascript Option object and appending it to the control:

How to add a new options to JQuery Chosen Plugin Dynamically , multiple dropdown --> <select class="chosen" multiple="true" the selected attribute and selects the desired values during construction. All code belongs to the poster and no license is enforced. JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code. Links. Bug tracker Roadmap (vote for features) About Docs Service status

Comments
  • that's one peice of the puzzle, but what I also need is to be able to fire that when a user types something that isn't already in the list. i'm grinding through the source now :(
  • or is it a better idea to let them type whatever they want and check it on submit? I notice that seems to be what SO does
  • marking this as accepted because I got around the problem by having a text box to type in a new value, and on submitting that I used these commands to refresh chosen accordingly
  • Starting with version 1.0 which the trigger is now "chosen:updated". See harvesthq.github.io/chosen/#change-update-events
  • I know this is ancient old but I amusing Chosen as a Tag selector. To limit the tags available I have a separate popover that manages Adding available tags and edit/delete old ones. As new tags are added in the popover I will update Chosen to show it as a new Tag option to select. Here is an image of a MIlestone version of the popver I did i.imgur.com/HVQdyYI.png
  • Let me try and understand this...I download the fork and replace my current copy of chosen with that. Then I use the snippet to add the option to my element that is in the pull link you posted?
  • Or you just clone directly the merged version: github.com/koenpunt/chosen
  • I am a bit confused with this. Right now I'm using chosen in a lot of places within my site. If I get the source code from the last link and then replace the source code of the one I'm using for my site, will it work? I mean, do regular chosen updates reflect in the merged/forked one ?
  • Hahahaha don't hold your breath on any pull requests getting accepted, they've got a huge backlog of pull requests and no one's made a commit since late April. Chosen is apparently very low on their priority list right now.
  • Option adding is not something Harvest wants as a feature of Chosen, because Chosen is designed to be only a visual/UX enhancement of a select, not a functional one. But throughout the years I try to keep my fork up-to-date with the main repo.
  • You basically just repackaged @leogdion's answer.
  • With about a third the amount of code. That's a pretty significant improvement to me.
  • where the _ref comes from?