Building off of my other question…
I’m using the following code to create a Select2 select list:
<script>
$( document ).ready( function() {
$( '.js-example-placeholder-multiple' ).select2( {
placeholder : 'Choose categories',
closeOnSelect: false,
tags: true,
tokenSeparators: [ ',', ' ' ]
} );
} );
</script>
<select id="genreSelect" name="genreSelect"
class="js-example-placeholder-multiple js-states form-control"
multiple="multiple"
style="height: 30px; display: block; position: absolute;"
title="Select one or more categories, then
click the form to accept your selection(s).">
<optgroup label="Alternative">
<option value="Alternative_Rock">Alternative Rock</option>
<option value="College_Rock">College Rock</option>
<option value="Experimental_Rock">Experimental Rock</option>
<option value="Goth/Gothic_Rock">Goth/Gothic Rock</option>
<option value="Hard_Rock">Hard Rock</option>
</optgroup>
<option value="Other">Other</option>
</select>
Users who don’t already know that new items can be added simply by typing them into the Results tags/search box will see the Other option at the end of the select drop-down, and select it. This would normally add Other tag to the Results box, Instead, I want to display “Type in your new category.” as a placeholder (whether there are already selected tags or now), and then use the built-in Select2 feature to do this.