title: How to create a editable dropdown list ? with AJAX
body: <p>I'm trying to create a dropdown list with 'select' html tag , however , this made the input box impossible to edit.</p>
  
  <pre><code>  &lt;select name="blabla" id="search_container"&gt;
      &lt;option&gt;blabla&lt;/option&gt;
      ...
    &lt;/select&gt;
  </code></pre>
  
  <p>So i added an preceding input:</p>
  
  <pre><code>&lt;input type=text value="" onkeyup="searchFilter()"&gt; Search &lt;/input&gt;
  </code></pre>
  
  <p>And when user input anything inside that box , <code>searchFilter()</code> will fire,  returns a set of <code>&lt;option&gt;</code> , overrides <code>search_container</code>.</p>
  
  <p>But this makes the interface looks bad , i got two horizontal box here , but i did see many websites holds only one box , when user inputs , a list of option drops down , and you just pick one.</p>
  
  <p>Thanks for any responses here.</p>
  
  <p>@update , the term is called 'autocomplete' , and my problem is resolved. Thanks all</p>