title: auto complete to select option in javascript
body: <p>I am trying to make auto complete to select option according to input from the user</p>
  
  <p>something like </p>
  
  <pre><code>  &lt;input type=text onkeyup=findit()&gt;
  
  &lt;select id="sel"&gt;
          &lt;option value="s0001"&gt;Adams&lt;/option&gt;
          &lt;option value="s0002"&gt;Alder&lt;/option&gt;
           .
           .
           .
  &lt;select&gt;
  </code></pre>
  
  <p>I found this code 'but it only work on one select in the page( I need multi select)</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
   &lt;script type="text/javascript"&gt;
  
  
   //initialize some global variables
  var list = null;
  function fillit(sel,fld) {
  
  
          var field = document.getElementById("entry");
          var selobj = document.getElementById("sel");
          if(!list)
          {
                  var len = selobj.options.length;
                  field.value = "";
                  list = new Array();
                  for(var i = 0;i &lt; len;i++)
                  {
                          list[i] = new Object();
                          list[i]["text"] = selobj.options[i].text;
                          list[i]["value"] = selobj.options[i].value;
                  }
          }
          else
          {
              var op = document.createElement("option");
              var tmp = null;
              for(var i = 0;i &lt; list.length;i++)
             {
                  tmp = op.cloneNode(true);
                  tmp.appendChild(document.createTextNode(list[i]["text"]));
                  tmp.setAttribute("value",list[i]["value"]);
                  selobj.appendChild(tmp)/*;*/
             }
          }
  }
  
  
   function findIt(sel,field)
  {
          var selobj = document.getElementById("sel");
          var d = document.getElementById("display");
          var len = list.length;
          if(field.value.length &gt; 1)
          {
                  if(!list)
                  {
                          fillit(sel,field);
                  }
                  var op = document.createElement("option");
                  selobj.options.length = 1
                  var reg = new RegExp(field.value,"i");
                  var tmp = null;
                  var count = 0;
                  var msg = "";
                  for(var i = 0;i &lt; len;i++)
                  {
                          if(reg.test(list[i].text))
                          {
                                 // d.childNodes[0].nodeValue = msg;
                                  tmp = op.cloneNode(true);
                                  tmp.setAttribute("value",list[i].value);
                                  tmp.appendChild(document.createTextNode(list[i].text));
                                  selobj.appendChild(tmp);
                          }
                  } 
          }
          else if(list &amp;&amp; len &gt; selobj.options.length)
          {
                  selobj.selectedIndex = 0;
                  fillit(sel,field);
          }
  }
  
  
  
  
   &lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body onLoad="fillit(sel,entry)"&gt;
  &lt;div&gt;Enter the first three letters of a street and select a match from the menu.&lt;/div&gt;
  &lt;form&gt; 
  Street
  &lt;input type="text" name="Street" id="entry" onKeyUp="findIt(sel,this)"&gt;&lt;br&gt;
    &lt;select id="sel"&gt;
          &lt;option value="s0001"&gt;Adams&lt;/option&gt;
          &lt;option value="s0002"&gt;Alder&lt;/option&gt;
          &lt;option value="s0003"&gt;bol&lt;/option&gt;
          &lt;option value="s0004"&gt;col&lt;/option&gt;
          &lt;option value="s0005"&gt;dol&lt;/option&gt;
          &lt;option value="s0007"&gt;Cooper&lt;/option&gt;
  &lt;!--and so on and so forth--&gt;
    &lt;/select&gt; 
  &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Any Ideas How to make it work on multi select on the page?</p>
  
  <p>Thanks</p>
  
  <p>Baaroz</p>