javascript中实现list数据的即时过滤

<script language="JavaScript">
<!--
function aa(num){
my_list1 = new Array("1", "11", "111");
my_list2 = new Array("2", "22", "222");
_list = eval("my_list"+num);
d = form1.select1;
d.length = 0;
for (i = 0; i < _list.length; i++) {
lab = document.createElement("option");
lab.text = _list[i];
lab.value = _list[i];
d.add(lab);
//lab.innerText = _list[i];
//d.appendChild(lab);
}
}
//-->
</script> 
</head><body>
<form name="form1" method="post" action="">
  请输入数字1或者2 进行测试
    <input type="text" onKeyUp="aa(this.value);this.value='';">
  <select name="select1" size="3" id="select1">
  </select>
</form>

解决方案 »

  1.   

    http://fason.nease.net/samples/js/selectwithtip.html
      

  2.   

    http://joe.2418.com/programme/html/inputAndDrop/inputAndDrop.htm
    http://joe.2418.com/programme/html/inputAndDrop.rar
      

  3.   

    <script>
    function Filteropts()
    {
        var opart,astr,alen,opln,i,boo;
        boo = false;
        var result = new Array();
        var opts = document.all.sel1.options;
        opln = opts.length;
        astr = document.all.txt1.value.toLowerCase();
        alen = astr.length;
        if(alen == 0)
        {
            for(i=0;i<opln;i++)
            {
                  result[result.length] = opts[i];boo = true;
            }
        }
        else
        {
            for(i=0;i<opln;i++)
            {
                 opart = opts[i].text.toLowerCase().substring(0,alen)
                 if(astr == opart)
                 {
                       result[result.length]=opts[i];boo=true;
                 }
            }
        }
         if(!boo){result[0] = ""}
     return result;
    }
    function bao()
    {
        var opts = document.all.sel1.options;
    arr = Filteropts();
    opts.length=0;
    for(var i=0;i<arr.length;i++)
    {
        opts[opts.length] = new Option(arr[i].text,arr[i].value);
    }
    }
    </script> 
    <input type="text" name="txt1" onkeyup="bao()">
    <select name="sel1">
    <option>123456
    <option>234565
    <option>345676
    <option>356883
    <option>456698
    </select>
    </body>
    </html>
      

  4.   

    发现了个小BUG...这样就行了..<script>
    function Filteropts()
    {
        var opart,astr,alen,opln,i,boo;
        boo = false;
    var result = new Array();
    var opts = document.all.sel1clone.options;
        opln = opts.length;
        astr = document.all.txt1.value.toLowerCase();
        alen = astr.length;
        if(alen == 0)
        {
            for(i=0;i<opln;i++)
            {
                  result[result.length] = opts[i];boo = true;
            }
        }
        else
        {
            for(i=0;i<opln;i++)
            {
                 opart = opts[i].text.toLowerCase().substring(0,alen)
                 if(astr == opart)
                 {
                       result[result.length]=opts[i];boo=true;
                 }
            }
        }
         if(!boo){result[0] = ""}
     return result;
    }
    function bao()
    {
        var opts = document.all.sel1.options;
    arr = Filteropts();
    opts.length=0;
    for(var i=0;i<arr.length;i++)
    {
        opts[opts.length] = new Option(arr[i].text,arr[i].value);
    }
    }
    </script> 
    <!--过滤显示-->
    <input type="text" name="txt1" onkeyup="bao()">
    <select name="sel1">
    <option>123456
    <option>234565
    <option>345676
    <option>356883
    <option>456698
    </select>
    <!--源数据-->
    <select name="sel1clone" style="display:none">
    <option>123456
    <option>234565
    <option>345676
    <option>356883
    <option>456698
    </select>
    </body>
    </html>