觉得你可以在输入的时候弄个层显示匹配的项,然后用户用鼠标点,或者输入1、2、3……选中该选项。可以写成一个htc文件

解决方案 »

  1.   

    我找了段代码是匹配输入查询的,但是联动不会弄,能帮我改改不
    我这有段代码,可以实现分别输入提示省和市的信息,但是如何关联不知道,请高手指点,代码比较长,复制可以直接运行。
    <script language="javascript"> 
    var intIndex=0;arrList = new Array(); function dearray(aa)//定义array 

        arrList = aa.split(','); 
        intIndex = arrList.length; } function test() {    
    init();    
    dearray("s 上海,b 北京,s 四川,j 江西");    
    smanPromptList(arrList,"aspx");   
    dearray("s 上海,c 崇明,b 北京,c 成都");   
    smanPromptList(arrList,"aspx2");  
    }
    function init() { if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;} 
        arrList.sort( function(a, b) { 
        if(a.length>b.length)return 1; 
        else if(a.length==b.length)return a.localeCompare(b); 
        else return -1; 
            } 
        );  

    function smanPromptList(arrList,objInputId){         var objouter=document.getElementById("__smanDisp") //显示的DIV对象 
            var objInput = document.getElementById(objInputId); //文本框对象 
            var selectedIndex=-1; 
            var intTmp; //循环用的:)         if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;} 
                //文本框失去焦点 
                objInput.onblur=function(){ 
                    objouter.style.display='none'; 
                } 
                //文本框按键抬起 
                objInput.onkeyup=checkKeyCode; 
                //文本框得到焦点 
                objInput.onfocus=checkAndShow; 
                function checkKeyCode(){ 
                    var ie = (document.all)? true:false 
                    if (ie){ 
                        var keyCode=event.keyCode 
                        if (keyCode==40||keyCode==38){ //下上 
                            var isUp=false 
                            if(keyCode==40) isUp=true ; 
                            chageSelection(isUp) 
                        }else if (keyCode==13){//回车 
                            outSelection(selectedIndex); 
                        }else{ 
                            checkAndShow() 
                        } 
                    }else{ 
                        checkAndShow() 
                    } 
                    divPosition() 
                }             function checkAndShow(){ 
                            var strInput = objInput.value 
                            if (strInput!=""){ 
                                divPosition(); 
                                selectedIndex=-1; 
                                objouter.innerHTML =""; 
                                for (intTmp=0;intTmp<arrList.length;intTmp++){ 
                                    if (arrList[intTmp].substr(0, strInput.length)==strInput){ 
                                        addOption(arrList[intTmp]); 
                                    } 
                                } 
                                objouter.style.display=''; 
                            }else{ 
                                objouter.style.display='none'; 
                        } 
                        function addOption(value){ 
                            objouter.innerHTML +="<div onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('"+objInputId+"').value='" + value + "'\">" + value + "</div>"     
                        } 
                } 
                function chageSelection(isUp){ 
                    if (objouter.style.display=='none'){ 
                        objouter.style.display=''; 
                    }else{ 
                        if (isUp) 
                            selectedIndex++ 
                        else 
                            selectedIndex-- 
                    } 
                    var maxIndex = objouter.children.length-1; 
                    if (selectedIndex<0){selectedIndex=0} 
                    if (selectedIndex>maxIndex) {selectedIndex=maxIndex} 
                    for (intTmp=0;intTmp<=maxIndex;intTmp++){                     if (intTmp==selectedIndex){ 
                            objouter.children[intTmp].className="sman_selectedStyle"; 
                        }else{ 
                            objouter.children[intTmp].className=""; 
                        } 
                    } 
                } 
                function outSelection(Index){ 
                    objInput.value = objouter.children[Index].innerText; 
                    objouter.style.display='none'; 
                } 
                function divPosition(){ 
                    var clx,cly; 
                    clx=event.clientX; 
                    cly = event.clientY; 
                    objouter.style.top    = cly+10; 
                    objouter.style.left    = clx+20;  
                    objouter.style.width= getAbsoluteWidth(objInput) 
                } 
        } 
        document.write("<div id='__smanDisp' style='position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;' onbulr> </div>"); 
        document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>"); 
        function getAbsoluteHeight(ob){ 
            return ob.offsetHeight 
        } 
        function getAbsoluteWidth(ob){ 
            return ob.offsetWidth 
        } 
        function getAbsoluteLeft(ob){ 
            var mendingLeft = ob .offsetLeft; 
            while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){ 
                mendingLeft += ob .offsetParent.offsetLeft; 
                mendingOb = ob.offsetParent; 
            } 
            return mendingLeft ; 
        } 
        function getAbsoluteTop(ob){ 
            var mendingTop = ob.offsetTop; 
            while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){ 
                mendingTop += ob .offsetParent.offsetTop; 
                ob = ob .offsetParent; 
            } 
            return mendingTop ; 
        } 
    </script> 
    <body onLoad="test()"> 
    <body onload="test()"></body>
    请输入内容:<br/><input type="text" id="aspx">
    <br/></font> 
    <input type="text" id="aspx2"><br/>  </font>
      

  2.   

    现在不是很多JS实现的SELECT省市地区联动的吗,现在就是想把SELECT框改成可输入查询的联动
      

  3.   

    呵呵,周末高手都去 happy 了,俺帮你看看吧!先说说基本思路,首先明确不改可输入下拉框,仅对 Select 增加键盘监听事件!理由,因为客户不是程序员,他们的想法只能作为参考,不能照单全收!程序员需要根据实际情况加以判断,省市县都是国家行政区划规定好的,没必要输入,客户仅仅需要的是快速筛选功能,根本不会自己输入,客户都很懒,因此他们要为懒惰付出代价!
      

  4.   

    简单实现,LZ 自己改改吧!L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
     </head> <body>
     <h3>仅以省为示例,纯 JS 实现,市、县思路完全一致。只需对三级联动略作修改即可使用</h3>
     <h3>需要注意的是:回发数据中必须有 initial 一列,用于筛选。注:必须保证英文输入法状态</h3>
        <select id="selProvince">
            <option value="-1">--请选择 省--</option>
            <option value="1" intial="b">北京市</option>
            <option value="2" intial="s">上海市</option>
            <option value="3" intial="t">天津市</option>
            <option value="4" intial="c">重庆市</option>
            <option value="5" intial="h">河北省</option>
            <option value="6" intial="h">河南省</option>
            <option value="7" intial="s">山东省</option>
            <option value="8" intial="s">山西省</option>
            <option value="8" intial="h">黑龙江省</option>
        </select>
     <h3>另,Select 本身就具有筛选功能!请保证在焦点存在的情况下,在下面的 Select 上输入 “黑”</h3>
        <select onmouseover="this.focus();">
            <option value="-1">--请选择 省--</option>
            <option value="1" intial="b">北京市</option>
            <option value="2" intial="s">上海市</option>
            <option value="3" intial="t">天津市</option>
            <option value="4" intial="c">重庆市</option>
            <option value="5" intial="h">河北省</option>
            <option value="6" intial="h">河南省</option>
            <option value="7" intial="s">山东省</option>
            <option value="8" intial="s">山西省</option>
            <option value="8" intial="h">黑龙江省</option>
        </select>
        <script type="text/javascript">
        <!--
    var oProvince = document.getElementById("selProvince");var arrProvinces = new Array();
    var optProvice;
    // 保存省信息至对象数组
    for (var i=0; i<oProvince.options.length; i++)
    {
        optProvice = oProvince.options[i];
        arrProvinces[i] = {value:optProvice.value, intial:optProvice.intial, text:optProvice.text};
    }oProvince.onmouseover = function ()
    {
        this.focus();
    };
    oProvince.onkeypress = function ()
    {
        var strInitial = String.fromCharCode(event.keyCode).toLowerCase();
        this.options.length = 0;
        for (var i=0; i<arrProvinces.length; i++)
        {
            if (arrProvinces[i].intial === strInitial)
            {
                this.options.add(new Option(arrProvinces[i].text, arrProvinces[i].value));
            }
        }
    };
        //-->
        </script>
     </body>
    </html>
      

  5.   

    yixianggao兄弟谢谢你,你的方法是很不错,但是我找到的三级联动的代码如下,不知道你那个intial加在什么地方:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    <script language="javascript" src="city.js"></script>
    <SCRIPT LANGUAGE = JavaScript>
    var s=["s1","s2","s3"];
    var opt0=["省份","地级市","市、县级市、县"];
    function setup(){
       for(i=0;i<s.length-1;i++){
           document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");}
       change(0);}
    </SCRIPT>
    </head><body onload="setup();">
    <form name="frm">
    <select id="s1"><option>省份</option></select>
    <select id="s2"><option>地级市</option></select>
    <select id="s3"><option>市、县级市、县</option></select>
    </form>
    </body>
    </html>
    JS文件下载地址
    http://ys-e.ys168.com/ys168up/D3/?city.jsy69z79fdql9f9b3z95bci1fd0fq9b4b0fd2b2b4f6e06e15e24b1b0f2f9bp9b4fc1f9b6z
      

  6.   

    <option value="1" intial="b">这种东西加在哪,怎么改啊
      

  7.   

    LZ 的 Server 端用什么?ASP.NET?如果是 ASP.NET 只需在返回的 DataTable 或 DataView 中增加一列 intial,当然这列应该是从数据库查出来的!intial 不必添加到 option 上,保存在对象数组中即可,仅用于筛选。俺那么做仅仅为了省事,少写几句初始化代码,哈
      

  8.   

    连动的可以按这个写http://www.pigcode.com/dispbbs.asp?boardid=7&id=210