title: Filter options of a <select> with javascript?
body: <p>I have a select with some values. When the user enters a vehicle in the search box, the drop down gets filtered to the option value that matches in the search box. I am able to get this first part of the code to work but the problem I am having, is how would I be able to save the option value that was filtered in the drop down so that it becomes the first option in the list. Lets say for example the user by mistake, hits the backspace button because if that happens the option value that was selected is no longer selected and the option value is defaulted back to the first option in the drop down. I am guessing to save the value I would have to use a cookie, totally lost on this part, any suggestions would be helpful. Thanks!</p>
  
  <blockquote>
    <p>Has to be able to work in IE5 and Up :/</p>
  </blockquote>
  
  <pre><code>&lt;input type="text" id="searchFilter" placeholder="Search" onkeyup="FilterItems(this.value);" /&gt;
  &lt;select id="ddVehicles"&gt;
      &lt;option value="1"&gt;BMW&lt;/option&gt;
      &lt;option value="2"&gt;Mercedes-Benz&lt;/option&gt;
      &lt;option value="3"&gt;Bentley&lt;/option&gt;
      &lt;option value="4"&gt;Lamborghini&lt;/option&gt;
  &lt;/select&gt;
  
  
  
  var ddlText, ddlValue, ddl;
  function CacheItems() {
    ddlText = new Array();
    ddlValue = new Array();
    ddl = document.getElementById("ddVehicles");
    for (var i = 0; i &lt; ddl.options.length; i++) {
       ddlText[ddlText.length] = ddl.options[i].text;
       ddlValue[ddlValue.length] = ddl.options[i].value;
    }
  }
  window.onload = CacheItems;
  
  function FilterItems(value) {
    ddl.options.length = 0;
    for (var i = 0; i &lt; ddlText.length; i++) {
       if (ddlText[i].toLowerCase().indexOf(value) != -1 || ddlText[i].toUpperCase().indexOf(value) != -1) {
          AddItem(ddlText[i], ddlValue[i]);
      }
    }
  }
  
  function AddItem(text, value) {
    var opt = document.createElement("option");
    opt.text = text;
    opt.value = value;
    ddl.options.add(opt);
  }
  </code></pre>