allow new values with chosen.js multiple select

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

Solution 1:

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"

Solution 2:

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