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
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
Here's a simple way that I did it:
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".
Update of leogdion answer for multiple select (gist)
Example usage on rails (slim)
An update to leogdion's answer which works with later versions of chosen:
I have updated the code from 3nochroot once more. Now I have only one selector to find the multiselect input.
})