title: How to add an input text field into a select element
body: <p>I try to develop a custom selectbox with „chosen“ (<a href="https://harvesthq.github.io/chosen/" rel="nofollow noreferrer">https://harvesthq.github.io/chosen/</a>).</p>
  
  <p>How can I achieve to add a single input text field ("Eigene Auflage") at the bottom of the opened select box which adds his value to the top, if someone clicks at it types something in. See image: <a href="https://i.stack.imgur.com/43Ou2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/43Ou2.png" alt="enter image description here"></a>)</p>
  
  <p>Do I have to change the select/option into a ul/li ?</p>
  
  <p>Here is my markup:</p>
  
  <pre><code>&lt;select class="replace-select"&gt;
    &lt;option value="select-filled-1"&gt;Select Filled 1&lt;/option&gt;
    &lt;option value="select-filled-2"&gt;Select Filled 2&lt;/option&gt;
    &lt;option value="select-filled-3"&gt;Select Filled 3&lt;/option&gt;
    &lt;option value="select-filled-4"&gt;Select Filled 4&lt;/option&gt;
    &lt;option value="select-filled-5"&gt;Select Filled 5&lt;/option&gt;
    &lt;option value="select-filled-6"&gt;Select Filled 6&lt;/option&gt;
    &lt;option value="select-filled-7"&gt;Select Filled 7&lt;/option&gt;
    &lt;option value="select-filled-8"&gt;Select Filled 8&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>