title: Get user input from single select box using Select2
body: <h2>Issue</h2>
  
  <p>I just started using <strong>Select2</strong> (<a href="http://ivaynberg.github.io/select2/" rel="nofollow noreferrer">http://ivaynberg.github.io/select2/</a>) and I am trying to do a basic task.</p>
  
  <p>I have a select box that has, for example, 3 items in it. I want to be able to have the user either select 1 of the 3 results or type in their own result and then eventually, on submit, it will submit whatever value is in the box.</p>
  
  <h2>What I've Tried</h2>
  
  <pre><code>&lt;input style="width: 200px;" type="hidden" id="foo" /&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function () {
          $("#foo").select2({
              query: function (query) {
                  var data = { results: [{ text: 'math' }, { text: 'science' }, { text: 'english' }] };
                  data.results.push({ text: query.term });
                  query.callback(data);
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The code above allows me to see the 3 results and type in a result myself. But I am unable to get the typed in result to "stick" when I click away, hit enter, or select the result I just typed in. Same goes for the select options, but I am most concerned with the user inputted text.</p>
  
  <p>Here's what it looks like:</p>
  
  <p><img src="https://i.imgur.com/XPnPR8H.png" alt="http://i.imgur.com/XPnPR8H.png"></p>