Add a new option item when the user chooses Other from the list

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.

Instead of trying to hack Select2 to add such a feature, why not just put some simple instructions above your Select2 informing users that they can type to select existing items, or add new items by typing the value and pressing Enter? If you don’t want instructions to display all the time, you could even do this with a “tooltip” that appears when the user focuses on the Select2’s text input field. (You can detect this event via the select2:opening event.)