通过程序(asp)给select添加了4千多个选项,全是字母和数字组合;另有一个文本框,在其中输入一个字母或数字,则select定位到以该字母或数字开头的选项,如果输入两个,则定位到以这两个开头的选项,以此类推,用js可以实现么?

解决方案 »

  1.   

    ie8下测试通过:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head><title></title></head>
    <body>
    <div>
    <select id="select1">
    <option>a1</option>
    <option>aa1</option>
    <option>aa2</option>
    <option>aa3</option>
    <option>b1</option>
    <option>bb1</option>
    <option>bb2</option>
    <option>bb3</option>
    <option>cc1</option>
    <option>cc2</option>
    <option>cc3</option>>
    </select>
    <input type="text" id="txt1"/>
    </div> 
    </body>
    <script> 
    var g=function(id) {return document.getElementById(id)};
    g("txt1").onkeyup=function() {
    var sel=g("select1");
    var len=sel.length;
    var reg=new RegExp("^"+this.value,"i");
    for(var i=0;i<len;i++) {
    if(reg.test(sel.options[i].text)) {
    sel.selectedIndex=i;
    break;
    }
    }
    }
    </script> 
    </html>
      

  2.   

    楼上ie6下也OK,不用正则如下:
    <script> 
    var g=function(id) {return document.getElementById(id)};
    g("txt1").onkeyup=function() {
        var sel=g("select1");
        var len=sel.length;
        for(var i=0;i<len;i++) {
            if(sel.options[i].text.indexOf(this.value)==0) {
                sel.selectedIndex=i;
                break;
            }
        }
    }
    </script> 
      

  3.   

    我发现怎么backspace键怎么不能用了
      

  4.   

    另外,我加了一句sel.multiple=true;
    并想将筛选到的选项放到最上面该怎么做啊
      

  5.   

    for(var i=0;i<len;i++) {
            if(reg.test(sel.options[i].text)) {
                sel.selectedIndex=i;
                sel.multiple=true;
                break;
            }