title: How can I put an input in the top of select tag for searching?
body: <p>I'm trying to make an advanced <code>&lt;select&gt;</code> tag but implementing an input before the first <code>&lt;option&gt;</code> attribute for searching. Something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/2fgr6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2fgr6.png" alt="enter image description here"></a></p>
  
  <p>Here is my code. How can I add <code>&lt;input name="search_category" class="search" /&gt;</code> to my code?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>select {
    width: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;select size="1" class="selection"&gt;
      &lt;option&gt;Social&lt;/option&gt;
      &lt;option&gt;Political&lt;/option&gt;
      &lt;option&gt;Cultural&lt;/option&gt;
      &lt;option&gt;Athletic&lt;/option&gt;
      &lt;option&gt;Other&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Note:</strong> I use jQuery.</p>