页面中的文本框,要求客户填写的时候,如果是有相似值的话,填充到下拉菜单中去
比如很多邮箱登陆的时候都有,当客户输入:012的时候,下拉自动出现0121,0129,01288,012521...
在数据库中的center表的c_number字段中去查找
select c_number from center where c_number like '012%' 
然后填充到下拉列表供选择!
各位大哥帮帮忙,给个完整的解决案例

解决方案 »

  1.   

    好像可以用ajax动态提交后返回下拉框的值?
    但是不知道怎么去实现
      

  2.   

    <script language="javascript">
    var intIndex=0;arrList = new Array();
    arrList[intIndex++] = "1sdfsdf.com";
    arrList[intIndex++] = "a11sdafs.net";
    arrList[intIndex++] = "b22dsafsdf";
    arrList[intIndex++] = "c333asdfsadf";
    arrList[intIndex++] = "4444dsafasdf";
    arrList[intIndex++] = "dddsfddsafdsaf";
    arrList[intIndex++] = "121213dsafsdaf";
    arrList[intIndex++] = "43213asdfadsf";
    arrList[intIndex++] = "dsa3121dasf3";
    arrList[intIndex++] = "a213";
    arrList[intIndex++] = "323313";
    arrList[intIndex++] = "3213";
    arrList[intIndex++] = "32213";
    arrList[intIndex++] = "dsfsdddd";
    arrList[intIndex++] = "ds11dfsfd";
    arrList[intIndex++] = "ffdafd";
    arrList[intIndex++] = "afdfd";
    arrList[intIndex++] = "afd";
    arrList[intIndex++] = "baffad";
    arrList[intIndex++] = "2fda2fd";
    arrList[intIndex++] = "dasd";function smanPromptList(arrList,objInputId){
            this.style = "background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;"
            if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}
            window.onload =function() {
                                         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;
                                        })
                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).toUpperCase()==strInput.toUpperCase()){
                                            addOption(arrList[intTmp]);
                                        }
                                    }
                                    objouter.style.display='';
                                }else{
                                    objouter.style.display='none';
                            }
    //将值添加到div中
                            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="";
                            }
                        }
                    }
    //将div的值显示在文本框中
                    function outSelection(Index){
                        objInput.value = objouter.children[Index].innerText;
                        objouter.style.display='none';
                    }
    //计算div的定位
                    function divPosition(){
                        objouter.style.top        =getAbsoluteHeight(objInput)+getAbsoluteTop(objInput);
                        objouter.style.left        =getAbsoluteLeft(objInput); 
                        objouter.style.width=getAbsoluteWidth(objInput)
                    }
            }
            document.write("<div id='__smanDisp' style='position:absolute;display:none;" + this.style + "' 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
            }
    //Lef位置
            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 ;
            }
    //Top位置
            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 ;
            }
    }
    smanPromptList(arrList,"inputer")
    </script>
    你去参考下吧,你现在的问题是怎样去数据库读取数据。
      

  3.   

    我也作过类似的功能,首先从数据库中读取数据,然后通过正则表达式过滤那些需要的显示在div中就可以了.这样就实现你想要的效果了.